角小白在这里。 我创建一个指令来递归显示问题和子问题一棵树。 我使用它要求范围内的功能模板的链接。 出于某种原因，但这并没有调用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',
terminal: true,
scope: { value: '=' },
template: tpl,
link: function(scope, element, attrs) {
$compile(element.contents())(scope.$new());
}
};
});
在了解任何帮助，这将不胜感激。
你已经有了一个范围问题。 既然你在你的指令采用隔离范围scope: { value: '=' }它不再具有访问具有控制器的范围editQuestion 。
你需要传递editQuestion沿着你的指令的范围，所以它知道如何调用它。 这通常是很容易的，但因为你的无限递归指令结构，其中选择可以包括的问题，它变得有点棘手。 这里有一个工作小提琴：
http://jsfiddle.net/n9KNv/14/
该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',
terminal: true,
scope: { value: '=', onEdit: '&' },
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>' +
'' +
' <questions value="choice.questions" on-edit="onEdit({subQuestion: question})"></questions>'
' </li>' +
'</ul>';
return {
restrict: 'E',
terminal: true,
scope: { value: '=', onEdit: '&' },
template: tpl,
link: function(scope, element, attrs) {
$compile(element.contents())(scope.$new());
}
};
});
请注意，我们如何定位question在ng-click 。 这是您的指定回调函数的参数。 还要注意如何在on-edit我们传递给你的choices指令，我们要定位subQuestion 。 这是因为， question是里面已经预留ngRepeat ，所以我们需要在两者之间进行区分。
这可能是最难的概念对我来说，角学会为止。 一旦你理解范围控制器，指令和其他指令之间是如何工作的，棱角分明的世界是你们的。 :)
这是范围问题。 该指令的NG-点击调用当前范围的editQuestion＆removeQuestion方法，它不会在指令的范围存在，因为它们在被包括指令（即父范围）模块定义。
要建立一个指令和家长，这样的情况下，指令调用ngClick功能，它触发承载该指令模块之间的结合。
要么你可以定义在指令本身，或设置方法通过的范围部分结合指令定义对象
下面是说明了在不同范围烧制NG-点击事件plunker（输出到控制台）
http://plnkr.co/edit/9XfXCpU6lhUOqD6nbVuQ?p=preview
兰登5月10' 日13的答案是正确的。 出于演示的目的，我精简兰登的小提琴代码，并把它从下降148线角到23线的角度。
我还添加使得能够在传递函数的参数值通过函数调用方法的MouseEvent对象和检索所述值的功能。
这里的的jsfiddle其次是代码和学分，这应该是很容易做到。
http://jsfiddle.net/BeyondLogical/evjzoo30/
--Html--
<div ng-controller="FormCtrl">
<questions on-edit="editQuestion(ev,question)" ></questions>
</div>
--AngularJS--
var app = angular.module('myApp', []);
function FormCtrl ($scope) {
$scope.editQuestion = function (ev,question) {
//ev returns a MouseEvent object
alert("ev: " + ev);
//this is how you get the 'data' attribute set in the span tag below
alert("ev-data: " + ev.target.attributes.data.value);
};
}
app.directive('questions', function($compile) {
var tpl =
'<span ng-click="onEdit({ev: $event, myName: question})" data="This sentence would probably be replaced with a mustache brace parameter, example: {{someValue}}, returning a value from the scope." style="cursor:pointer;">Click Me</span>';
return {
restrict: 'E',
terminal: true,
scope: { onEdit: '&' },
template: tpl,
link: function(scope, element, attrs) {
$compile(element.contents())(scope.$new());
}
};
});
学分，
兰登- NG-点击未在指令的模板内工作
马克Rajcok - AngularJS从指令获取$事件 （兰登也得到了帮助询问问号答案）
PavanAsTechie - 内非定向控制器功能的访问属性值和帕万的的jsfiddle - http://jsfiddle.net/brettdewoody/FAeJq/ （尤其是帕文的代码下面一行）： alert(obj.target.attributes.data.value);
任何人来到这个与和试图用一个不是在你的指令运行的代码来做到这一点，请检查你是不是使用选项取代 。
例如：
angular.module('app').directive('myDirective', function () {
return {
template: '<div ng-click="clicked()"></div>',
scope: {
options: "="
},
replace: true, //<---- Change this to false
restrict: 'E',
controller: function ($scope) {
$scope.clicked = function(){
console.log("Clicked");
}
}
};
}
