Angular 参数数量未知的指令函数

Question

我想使用这样的指令：

<my-directive some-method="method(arg0, arg1)"></my-directive>

指令看起来像：

angular.module('module').directive('myDirective', directive);

   function directive() {
        return {
            restrict:'E',
            scope: {
                someMethod: '&'
            },
            template:'<div ng-click="someMethod()"></div>'
        };
    };

我想打电话给method(arg0, arg1)当我打电话给someMethod()。可能吗？

Answer 1

您可以将这两个参数绑定为模板中的属性。您可以在指令 link 函数中访问这两个参数。下面的示例我只是在控制台中显示这两个参数。

我的建议：不需要传递函数someMethod，可以在指令中定义一个someMethod函数。检查 link 会话中的注释代码。

指令：

angular.module('module').directive('myDirective', directive);

function directive() {
    return {
        restrict:'E',
        scope: {
            someMethod: '&',
            firstArg: '=',
            secondArg: '=',
        },
        link: function (scope, element, attr) {
          console.log(scope.firstArg);
          console.log(scope.secondArg);

          /*  function someMethod( arg0, arg1) {
           *  implement the someMethod based on your logic.  
           *
           *  }
           */
        },
        template:'<div ng-click="someMethod()"></div>
    };
};

HTML:

<my-directive some-method="method" firstArg="arg0" secondArg="arg1"></my-directive>

Answer 2

根据您使用的 angular 版本，您所拥有的应该可以正常工作。参见 http://jsfiddle.net/TheSharpieOne/b7btgudo/

请注意，无需绑定参数。查看控制台日志以获取输出。

angular.module('app', [])
.controller("myCtrl", myCtrl)
.directive('myDirective', directive);

   function directive() {
        return {
            restrict:'E',
            scope: {
                someMethod: '&'
            },
            template:'<div ng-click="someMethod()">Click Here</div>'
        };
    }

    function myCtrl($scope){
      $scope.myMethod = console.log.bind(console);
      $scope.something = "something";
      $scope.somethingElse = "somethingElse";
    }

简单HTML:

<div ng-app="app" ng-controller="myCtrl">
 <my-directive some-method="myMethod(something, somethingElse)"></my-directive>
</div>

如果您使用 ControllerAs 语法，您需要确保将 'scoped' functions/vars 放在 this 上，并在 HTML 中使用点符号.

Angular 参数数量未知的指令函数

Angular directive function with unknown number of parameters

parameters

function

angularjs

angularjs-directive