angularjs指令绑定带参数的函数
angularjs directive binding function with argument
我想把带参数的函数发送到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);
}
}
});
我希望使用"arg"answers"content"参数执行"itIsControllerFunction"。所以我制作了一个函数"makeDirectiveFunction"来制作具有"content"参数的函数。
这是视图(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);
}
}
}
});
它运行良好,但控制台显示信息错误
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: '=',
}
来自源
最佳实践:使用&当您希望指令公开用于绑定到行为的API时,范围选项中的attr
第二:因为你要返回一个函数,你需要第二对括号来调用内部函数,请参见下面:
scope.doInDirective = function() {
var content = "I'm in directive!";
scope.doFunc()(content);
}
请参阅此处的工作示例
完整代码:
<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:我可以跳过函数参数回调吗
- 为什么不'我们在javascript中使用函数参数的数据类型
- 使用闭包共享构造函数参数
- 函数参数的值错误
- 当一个重要的构造函数参数丢失时应该发生什么
- 阻止ReSharper将JavaScript函数参数放到新行中
- 根据函数参数将CSS值存储在var中,然后对其进行操作
- 使构造函数参数具有ES6类方法的特权
- 当客户端将两个按钮的javascript函数参数修改为相同时,SQL/PHP会更新多行
- Windows.Networking.EndpointPair构造函数参数
- 是否可以使用Sinon.JS检查函数参数绑定是否正确
- 大括号中的Javascript函数参数
- jQuery 无法使用 AJAX 调用访问函数内部的函数参数
- 将JSON字符串转换为函数参数
- eval()读取函数参数有多糟糕
- Javascript不能在一个命令中使用函数参数
- 函数参数在内部不可见,返回新的Promise(函数(resolve,reject).传递给被promise化的函数的
- ES6类构造函数参数
- 是否可以在javascript函数参数列表中调用多个函数