ng-click не работает в шаблоне директивы
Угловой нуб здесь. Я создаю директиву для рекурсивного отображения дерева вопросов и подвопросов. Я использую ссылку в шаблоне, которая вызывает функцию в рамках. По какой-то причине это не вызывает 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());
}
};
});
Любая помощь в понимании этого будет принята с благодарностью.
4 ответа
У вас проблема с объемом. Так как вы использовали изолированную область в вашей директиве с scope: { 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',
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Таким образом, мы должны различать два.
Это было, вероятно, самой сложной концепцией для меня в Angular. Как только вы поймете, как работает область действия между контроллерами, директивами и другими директивами, мир Angular станет вашим.:)
Это проблема объема. Директива ng-click вызывает методы текущей области editQuestion & removeQuestion, которых нет в области действия директивы, так как они определены в модуле, который включает директиву (т. Е. Родительскую область).
Вы хотите установить связь между директивой и родителем, поэтому, когда директива вызывает функцию ngClick, она запускается в модуле, в котором размещена директива.
Либо вы можете определить методы в самой директиве, либо настроить привязку через раздел scope объекта определения директивы
Вот плункер, который иллюстрирует запуск событий ng-click в разных областях (вывод на консоль)
Langdon's May10' 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());
}
};
});
Кредиты для,
Langdon - ng-click не работает в шаблоне директивы
Марк Райкок - AngularJS получает $event из директивы (Лэнгдон также получает помощь для того, чтобы задать вопрос Марк Ответы)
PavanAsTechie - Доступ к значению атрибута внутри не-директивной функции контроллера и JSFIDDLE Павана - http://jsfiddle.net/brettdewoody/FAeJq/ (особенно следующая строка кода Павана):alert(obj.target.attributes.data.value);
Любой, кто придет к этому и попытается сделать это с кодом, который не выполняется в вашей директиве, убедитесь, что вы не используете опцию replace.
Например:
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");
}
}
};
}