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

Question

我在将 Controller 中定义的函数与指令中的回调函数绑定(bind)时遇到一些问题。我的代码如下所示:

在我的 Controller 中:

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

Answer 1

能够在缩小中幸存的替代方法

保持 html 不变:

<my-directive on-drop="handleDrop"></my-directive>

将调用更改为:

scope.onDrop()('123','125')

请注意 onDrop 的额外左括号和右括号。这将实例化函数而不是注入(inject)函数的代码。

为什么更好

1. 更改 handleDrop() 定义中的参数名称(或者甚至添加更多参数，如果处理正确的话)不会使您更改 html 中的每个指令注入(inject)。非常干燥。

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

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

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

相对于

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

我找到了这个很棒的解决方案 here .