Question

我想向angularjs指令发送带参数的函数。因为这个指令总是只使用一个自己的变量。控制器发送到指令的函数和函数正在使用该变量。

我制作如下控制器

app.controller('TestController', function($scope) {
    $scope.args = ['arg1', 'arg2', 'arg3', 'arg4', 'arg5'];
    $scope.makeDirectiveFunction = makeDirectiveFunction;

    function iWantDoThisInDirective(arg, content) {
        alert(arg + content);
    }

    // Controller make function with 'arg'
    // and return function that have 'content' parameter
    // finally doing controller function with 'arg' and 'content' argument
    function makeDirectiveFunction(arg) {
        return function editorFunc(content) {
            iWantDoThisInDirective(arg, content);
        }
    }
});

我想要执行＆＃39; itIsControllerFunction＆＃39;与＆＃39; arg＆＃39;和＆＃39;内容＆＃39;参数。所以我创造了一个功能＆＃39; makeDirectiveFunction＆＃39;制作具有“内容”功能的功能参数。

这是视图（index.html）

<div ng-repeat="arg in args">
    <redactor do-func="makeDirectiveFunction(arg)"></redactor>
</div>

这是指令

app.directive('redactor', function($timeout) {
    return {
        restrict: 'EA',
        scope: {
            doFunc: '=',
        },
        template: '<button ng-click="doInDirective()">Register!</button>',
        link: function(scope, element, attrs) {
            scope.doInDirective = function() {
                var content = "I'm in directive!";
                scope.doFunc(content);
            }
        }
    }
});

效果很好，但是控制台显示 infdig错误

Error: $rootScope:infdig
Infinite $digest Loop
10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}"}],[{"msg":"fn: function (c,e,f,g){f=d&&g?g[0]:a(c,e,f,g);return b(f,c,e)}"}]]

也许它引起了嵌套返回功能，但我无法解决它。我希望你能提供帮助。感谢。

Answer 1

首先，当您将函数传递给指令时使用

scope: {
    doFunc: '&',
}

而不是

scope: {
    doFunc: '=',
}

来自source

最佳实践：当您希望指令公开API以绑定行为时，在范围选项中使用＆amp; attr

其次：因为你要返回一个函数，你需要第二对括号来调用内部函数，请看下面的内容：

scope.doInDirective = function() {
    var content = "I'm in directive!";
    scope.doFunc()(content);
}

请参阅工作示例here

完整代码：

<div ng-controller="TestController as vm">
  <div ng-repeat="arg in args">
    <redactor do-func="makeDirectiveFunction(arg)"></redactor>
  </div>
</div>

JS：

var myApp = angular.module('application', []);

myApp.controller('TestController', ['$scope', function($scope) {
  $scope.args = ['arg1', 'arg2', 'arg3', 'arg4', 'arg5'];
  $scope.makeDirectiveFunction = makeDirectiveFunction;

  function iWantDoThisInDirective(arg, content) {
    alert(arg + content);
  }

  // Controller make function with 'arg'
  // and return function that have 'content' parameter
  // finally doing controller function with 'arg' and 'content' argument
  function makeDirectiveFunction(arg) {
    return function editorFunc(content) {
      iWantDoThisInDirective(arg, content);
    }
  }
}]).directive('redactor', function($timeout) {
  return {
    restrict: 'EA',
    scope: {
      doFunc: '&doFunc',
    },
    template: '<button ng-click="doInDirective()">Register!</button>',
    link: function(scope, element, attrs) {
      scope.doInDirective = function() {
        var content = "I'm in directive!";
        scope.doFunc()(content);
      }
    }
  }
});

angularjs指令绑定函数与参数

1 个答案: