I've seen the many, many, many, many questions on this problem but for some reason I still can't bind ng-click
in my directive to a method on the parent controller. I'm pretty sure I've got my scope isolation and method parameter passing right but no luck so far. A gross simplification (this app is huge) of my JS looks like this:
我已经看到了关于这个问题的许许多多问题,但是出于某种原因,我仍然不能将我的指令中的ng-click绑定到父控制器上的一个方法。我很确定我的范围隔离和方法参数传递是正确的,但到目前为止没有运气。我的JS的一个粗略的简化(这个app很大)是这样的:
angular.module('myApp', []);
angular.module('myApp').directive('myCustomDirective', customDirective);
function customDirective() {
return {
restrict: 'E',
scope: {
myCallback: '&myCallback'
}
template: '<div><h3>My directive</h3><p>I am item {{itemIndex}}</p><button ng-click="myCallback({itemIndex: itemIndex})">Click to call back</button></div>'
}
}
angular.module('myApp').controller('myController', myController);
function myController() {
var vm = this;
vm.selectedIndex = -1;
vm.items = [0, 1, 2, 3, 4];
vm.callbackMethod = function(itemIndex) {
vm.selectedIndex = itemIndex;
}
}
and the similarly simplified markup looks like this:
类似的简化标记如下:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="myController as test">
<p>Selected item: {{test.selectedIndex}}</p>
<my-custom-directive my-callback="test.callbackMethod" ng-repeat="item in test.items" ng-init="itemIndex = $index"></my-custom-directive>
</div>
</body>
</html>
I'm at a loss here as I've followed every SO post and blog on the subject and still nothing. Just to make things worse, the Plunk I made to illustrate this problem also doesn't work ($injector:nomod
) - bonus points if anyone can spot why! ;-)
我在这里不知所措,因为我一直在关注关于这个主题的每一篇SO和博客,但仍然一无所获。更糟糕的是,我用来说明这个问题的“扑通”也不起作用(注:如果任何人都能发现原因的话)。:-)
2 个解决方案
#1
2
You should define method with parameter, rather than putting it reference on directive element.
您应该使用参数定义方法,而不是将它引用到指令元素上。
my-callback="test.callbackMethod(itemIndex)"
Also do pass current element index to directive by adding it in isolated scope.
还通过在隔离范围中添加当前元素索引来将其传递给指令。
scope: {
myCallback: '&myCallback',
itemIndex: '='
},
演示
相关回答
#2
1
I added an extra attribute to your directive and removed the ng-init.
我向您的指令添加了一个额外的属性,并删除了ng-init。
<my-custom-directive my-callback="test.callbackMethod($index)" ng-repeat="item in test.items track by $index" theindex="$index"></my-custom-directive>
例子
#1
2
You should define method with parameter, rather than putting it reference on directive element.
您应该使用参数定义方法,而不是将它引用到指令元素上。
my-callback="test.callbackMethod(itemIndex)"
Also do pass current element index to directive by adding it in isolated scope.
还通过在隔离范围中添加当前元素索引来将其传递给指令。
scope: {
myCallback: '&myCallback',
itemIndex: '='
},
演示
相关回答
#2
1
I added an extra attribute to your directive and removed the ng-init.
我向您的指令添加了一个额外的属性,并删除了ng-init。
<my-custom-directive my-callback="test.callbackMethod($index)" ng-repeat="item in test.items track by $index" theindex="$index"></my-custom-directive>
例子