这里的角度。我创建一个指令，递归地显示一个问题和子问题树。我使用模板中的链接调用范围内的函数。由于某种原因，它不会调用editQuestion()方法。
这里是代码和小提琴http://jsfiddle.net/madhums/n9KNv/
HTML：
@H_404_5@<div ng-controller="FormCtrl"> <questions value="survey.questions"></questions> </div>Javascript：
@H_404_5@var app = angular.module('myApp',[]); function FormCtrl ($scope) { $scope.editQuestion = function (question) { alert('abc'); }; $scope.survey = { // ... } } app.directive('questions',function($compile) { var tpl = '<ol ui-sortable' + ' ng-model="value"' + ' class="list">' + ' <li ng-repeat="question in value | filter:search"' + ' <a href="" class="question">' + ' {{ question.name }}' + ' </a>' + ' <span class="muted">({{ question.type }})</span>' + ' <a href="" class="danger" ng-click="removeQuestion(question)">remove</a>' + ' <a href="" class="blue" ng-click="editQuestion(question)">edit</a>' + ' <choices value="question.choices"></choices>' + ' </li>' + '</ol>'; return { restrict: 'E',terminal: true,scope: { value: '=' },template: tpl,link: function(scope,element,attrs) { $compile(element.contents())(scope.$new()); } }; }); app.directive('choices',function($compile) { var tpl = '<ul class="abc" ng-repeat="choice in value">'+ ' <li>' + ' {{ choice.name }}' + ' <span class="muted">' + ' ({{ choice.questions.length }} questions)' + ' </span>' + '' + ' <a href=""' + ' ng-click="addQuestions(choice.questions)"' + ' tooltip="add sub questions">' + ' +' + ' </a>' + '' + ' <questions value="choice.questions"></questions>' ' </li>' + '</ul>'; return { restrict: 'E',attrs) { $compile(element.contents())(scope.$new()); } }; });任何帮助理解这一点将不胜感激。
您有范围问题。由于您在指令中使用范围为{value：’=’}的独立作用域，它不再能访问具有editQuestion的控制器作用域。
你需要传递editQuestion到你的指令的范围，所以它知道如何调用它。这通常很容易，但是因为你的无限递归指令结构，选择可以包括问题，它有点棘手。这是一个工作的小提琴：
HTML现在包括对editQuestion的引用：
@H_404_5@<div ng-controller="FormCtrl"> <questions value="survey.questions" on-edit="editQuestion(question)"></questions> </div>你的问题指令现在期望在其范围内的onEdit属性：
@H_404_5@app.directive('questions',function($compile) { var tpl = '<ol ui-sortable' + ' ng-model="value"' + ' class="list">' + ' <li ng-repeat="question in value | filter:search"' + ' <a href="" class="question">' + ' {{ question.name }}' + ' </a>' + ' <span class="muted">({{ question.type }})</span>' + ' <a href="" class="blue" ng-click="onEdit({question: question})">edit</a>' + ' <choices value="question.choices" on-edit="onEdit({question: subQuestion})"></choices>' + ' </li>' + '</ol>'; return { restrict: 'E',scope: { value: '=',onEdit: '&' },function($compile) { var tpl = '<ul class="abc" ng-repeat="choice in value">'+ ' <li>' + ' {{ choice.name }}' + ' <span class="muted">' + ' ({{ choice.questions.length }} questions)' + ' </span>' + '' + ' <questions value="choice.questions" on-edit="onEdit({subQuestion: question})"></questions>' ' </li>' + '</ul>'; return { restrict: 'E',attrs) { $compile(element.contents())(scope.$new()); } }; });请注意我们如何在ng点击中定位问题。这是如何在回调函数中定位参数。另外请注意，如何在编辑中我们传递给您的选择指令，我们的目标是subQuestion。这是因为问题已经保留在ngRepeat内部，所以我们需要区分两者。
这可能是我到目前为止在Angular学习的最难的概念。一旦你理解了控制器，指令和其他指令之间的作用域，Angular的世界是你的。
