这里的角度。我创建一个指令，递归地显示一个问题和子问题树。我使用模板中的链接调用范围内的函数。由于某种原因，它不会调用editQuestion()方法。
这里是代码和小提琴http://jsfiddle.net/madhums/n9KNv/
HTML：
<div ng-controller="FormCtrl"> <questions value="survey.questions"></questions> </div>
Javascript：
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的引用：
<div ng-controller="FormCtrl">
<questions value="survey.questions" on-edit="editQuestion(question)"></questions>
</div>
你的问题指令现在期望在其范围内的onEdit属性：
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的世界是你的。 原文链接：https://www.f2er.com/angularjs/145751.html
