我已经看到了many , many , many , many关于这个问题的问题，但由于某种原因，我仍然无法将指令中的 ng-click 绑定(bind)到父 Controller 上的方法。我很确定我的范围隔离和方法参数传递正确，但到目前为止还没有运气。我的 JS 的总体简化(这个应用程序很大)如下所示:
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;
}
}
类似的简化标记如下所示:
<!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>
我在这里不知所措，因为我已经关注了有关该主题的所有帖子和博客，但仍然一无所获。更糟糕的是，Plunk我用来说明这个问题也不起作用($injector:nomod) - 如果有人能找出原因，那就加分了! ;-)
最佳答案
您应该使用参数定义方法，而不是将其引用放在指令元素上。
my-callback="test.callbackMethod(itemIndex)"
还可以通过将当前元素索引添加到隔离范围中来将其传递给指令。
scope: {
myCallback: '&myCallback',
itemIndex: '='
},
关于angularjs - 无法从指令调用父 Controller 方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35481311/