AngularJS – 将指令传递给函数
我有一个例子angularJS
<div ng-controller="testCtrl"> <test color1="color1" updateFn="updateFn()"></test> </div> <script> angular.module('dr', []) .controller("testCtrl", function($scope) { $scope.color1 = "color"; $scope.updateFn = function() { alert('123'); } }) .directive('test', function() { return { restrict: 'E', scope: {color1: '=', updateFn: '&'}, template: "<button ng-click='updateFn()'>Click</button>", replace: true, link: function(scope, elm, attrs) { } } }); </script> </body> </html> 我想单击button时，警告框会出现，但没有显示。
任何人都可以帮我吗？
要在dash-separated作用域指令中调用父作用域中的控制器函数，请在OP中使用dash-separated属性名称，如OP所示。
另外，如果你想发送一个参数给你的函数，通过传递一个对象来调用函数：
<test color1="color1" update-fn="updateFn(msg)"></test>
JS
var app = angular.module('dr', []); app.controller("testCtrl", function($scope) { $scope.color1 = "color"; $scope.updateFn = function(msg) { alert(msg); } }); app.directive('test', function() { return { restrict: 'E', scope: { color1: '=', updateFn: '&' }, // object is passed while making the call template: "<button ng-click='updateFn({msg : \"Hello World!\"})'> Click</button>", replace: true, link: function(scope, elm, attrs) { } } });
小提琴
也许我错过了一些东西，但是虽然其他解决scheme确实调用了父范围函数，但是没有能力从指令代码传递参数，这是因为update-fn使用固定参数调用updateFn() ，例如{msg: "Hello World"} 。 稍微改变就可以让指令传递参数，我认为这些参数更有用。
<test color1="color1" update-fn="updateFn"></test>
请注意HTML传递一个函数引用，即没有()括号。
JS
var app = angular.module('dr', []); app.controller("testCtrl", function($scope) { $scope.color1 = "color"; $scope.updateFn = function(msg) { alert(msg); } }); app.directive('test', function() { return { restrict: 'E', scope: { color1: '=', updateFn: '&' }, // object is passed while making the call template: "<button ng-click='callUpdate()'> Click</button>", replace: true, link: function(scope, elm, attrs) { scope.callUpdate = function() { scope.updateFn()("Directive Args"); } } } });
所以在上面，HTML正在调用本地范围的callUpdate函数，然后从父范围'取'updateFn并使用指令可以生成的参数来调用返回的函数。
在你的'test'指令的Html标签中，函数的属性名称不应该是camelCased，而应该是基于短划线的。
所以 – 而不是：
<test color1="color1" updateFn="updateFn()"></test>
写：
<test color1="color1" update-fn="updateFn()"></test>
这是angular度的方式来说明指令属性（如update-fn函数）和函数之间的区别。
如何通过双向绑定传递控制器function？ 那么你可以在指令中使用它，就像在一个普通的模板中一样（为简单起见，我去掉了不相关的部分）：
<div ng-controller="testCtrl"> <!-- pass the function with no arguments --> <test color1="color1" update-fn="updateFn"></test> </div> <script> angular.module('dr', []) .controller("testCtrl", function($scope) { $scope.updateFn = function(msg) { alert(msg); } }) .directive('test', function() { return { scope: { updateFn: '=' // '=' bidirectional binding }, template: "<button ng-click='updateFn(1337)'>Click</button>" } }); </script>
我在这个问题上着陆，因为我尝试了上面的方法，但不知何故，它不起作用。 现在它完美的工作。
使用短划线和小写的属性名称（如其他答案所述）：
<test color1="color1" update-fn="updateFn()"></test>
在指令范围内使用“=”而不是“＆”：
scope: { updateFn: '='}
那么你可以像使用其他函数一样使用updateFn：
<button ng-click='updateFn()'>Click</button>
你走了！
我不得不使用“=”而不是“＆”，因为这不起作用。 奇怪的行为。
