AngularJS 指令绑定具有多个参数的函数

我在用指令中的回调函数绑定控制器中定义的函数时遇到了一些麻烦。我的代码如下:

在我的控制器里:

$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 页面中指定参数？

69592 次浏览
小开
最佳答案

您的代码中有一个小错误，请尝试下面的代码，它应该为您工作

<!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的额外的开括号和闭括号。这将实例化函数，而不是注入函数的代码。

为什么会更好

  1. 在 handleDrop()定义中更改参数的名称(如果处理正确，甚至可以添加更多的名称)不会使您更改 html 中的每个指令注入。烘干机。

  2. 正如@TrueWill 建议的那样，我几乎可以肯定，其他解决方案在缩小之后将无法生存，而这种方式的代码保持了最大的灵活性，并且与名称无关。

另一个个人原因是对象语法，这让我编写了更多的代码:

functionName({xName: x, yName: y}) // (and adding the function signature in every directive call)

正好相反

functionName()(x,y) // (zero maintenance to your html)

我发现这个伟大的解决方案 给你。


提交答案