我想将带参数的函数发送给 angularjs 指令。 因为该指令始终只使用一个自己的变量。 Controller 发送到指令的函数正在处理该变量。
我制作如下 Controller
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);
}
}
});
我想使用“arg”和“content”参数执行“itIsControllerFunction”。所以我创建了一个函数“makeDirectiveFunction”来创建具有“content”参数的函数。
这是 View (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)}"}]]
可能是嵌套返回函数导致的,但我无法解决。 我希望你能帮忙。谢谢。
最佳答案
首先,当您将函数传递给指令时
scope: {
doFunc: '&',
}
而不是
scope: {
doFunc: '=',
}
来自source
Best Practice: use &attr in the scope option when you want your directive to expose an API for binding to behaviors
其次:因为您要返回一个函数,所以需要第二对括号来调用内部函数,请参见下文:
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);
}
}
}
});
关于javascript - 带参数的 angularjs 指令绑定(bind)函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36174985/