AngularJS指令绑定一个函数与多个参数
我遇到了一些麻烦，在一个指令中用一个callback函数绑定一个控制器中定义的函数。 我的代码如下所示：
在我的控制器中：
$scope.handleDrop = function ( elementId, file ) { console.log( 'handleDrop called' ); } 那么我的指示是：
.directive( 'myDirective', function () { return { scope: { onDrop: '&' }, link: function(scope, elem, attrs) { var myFile, elemId = [...] scope.onDrop(elemId, myFile); } } );
并在我的HTML页面：
<my-directive on-drop="handleDrop"></my-directive>
上面的代码没有运气。 从我读过的各种教程中，我明白我应该在HTML页面中指定参数？
你的代码有一个小错误，请尝试下面的代码，它应该为你工作
<!doctype html> <html ng-app="test"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script> </head> <body ng-controller="test" > <!-- tabs --> <div my-directive on-drop="handleDrop(elementId,file)"></div> <script> var app = angular.module('test', []); app.directive('myDirective', function () { return { scope: { onDrop: '&' }, link: function (scope, elem, attrs) { var elementId = 123; var file = 124; scope.onDrop({elementId:'123',file:'125'}); } } }); app.controller('test', function ($scope) { alert("inside test"); $scope.handleDrop = function (elementId, file) { alert(file); } }); </script> </body> </html>
替代方法，将生存缩小
离开你的HTML，因为它是：
<my-directive on-drop="handleDrop"></my-directive>
将呼叫更改为：
scope.onDrop()('123','125')
注意给予onDrop额外的开启和closures括号。 这将实例化函数而不是注入函数的代码。
为什么更好？
-
在handleDrop（）定义中更改参数名称（甚至添加更多，如果正确处理）不会使您更改html中的每个指令注入。 多DRYer。
-
正如@TrueWill所build议的那样，我几乎可以肯定，其他的解决scheme将无法存活下来，而这种方式代码保持最大的灵活性，是名称不可知的。
另一个个人原因是对象的语法，这使得我写更多的代码：
functionName({xName: x, yName: y})
（并在每个指令调用中添加函数签名）
反对
functionName()(x,y)
（零维护到您的HTML）
我发现这个伟大的解决scheme
希望有所帮助！
