我有一个form指令，它使用callback带有隔离范围的指定属性：
scope: { callback: '&' }
它位于内，ng-repeat因此我传递的表达式包括id对象的，作为回调函数的参数：
<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>
当我完成指令后，它会$scope.callback()从其控制器函数中调用。在大多数情况下，这很好，这就是我想要做的，但有时我想从directive自身内部添加另一个参数。
是否有一个允许这样的角度表达式：$scope.callback(arg2)，导致用callback调用arguments = [item.id, arg2]？
如果不是，最整洁的方法是什么？
我发现这可行：
<directive
ng-repeat = "item in stuff"
callback = "callback"
callback-arg="item.id"/>
用
scope { callback: '=', callbackArg: '=' }
和指令调用
$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );
但我认为这不是特别整洁，它涉及在隔离范围内放入额外的内容。
有没有更好的办法？
此处为Plunker游乐场（已打开控制台）。
如果您声明@ lex82提到的回调，例如
callback = "callback(item.id, arg2)"
您可以使用对象映射在指令范围内调用回调方法，它将正确执行绑定。喜欢
scope.callback({arg2:"some value"});
无需$ parse。看到我的小提琴（控制台日志）http://jsfiddle.net/k7czc/2/
更新：文档中有一个小例子：
＆或＆attr-提供一种在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。给定和小部件的作用域定义：{localFn：'＆myAttr'}，然后隔离作用域属性localFn将指向count = count + value表达式的函数包装。通常希望将数据从隔离范围通过表达式传递到父范围，这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成。例如，如果表达式为增量（金额），则可以通过将localFn调用为localFn（{amount：22}）来指定金额值。
其他答案没什么问题，但是当在指令属性中传递函数时，我使用以下技术。
在html中包含指令时，请省略括号：
<my-directive callback="someFunction" />
然后在指令的链接或控制器中“解包”该函数。这是一个例子：
app.directive("myDirective", function() {
return {
restrict: "E",
scope: {
callback: "&"
},
template: "<div ng-click='callback(data)'></div>", // call function this way...
link: function(scope, element, attrs) {
// unwrap the function
scope.callback = scope.callback();
scope.data = "data from somewhere";
element.bind("click",function() {
scope.$apply(function() {
callback(data); // ...or this way
});
});
}
}
}]);
“展开”步骤允许使用更自然的语法调用该函数。它还确保该指令即使嵌套在可能通过该函数的其他指令中也能正常工作。如果您没有进行解包，那么您将遇到以下情况：
<outer-directive callback="someFunction" >
<middle-directive callback="callback" >
<inner-directive callback="callback" />
</middle-directive>
</outer-directive>
然后，您将在内部指令中得到如下所示的结果：
callback()()()(data);
在其他嵌套方案中将失败。
我改编自Dan Wahlin的出色文章，网址为http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters
我添加了展开步骤，以使调用函数更自然，并解决我在项目中遇到的嵌套问题。
在指令（myDirective）中：
...
directive.scope = {
boundFunction: '&',
model: '=',
};
...
return directive;
在指令模板中：
<div
data-ng-repeat="item in model"
data-ng-click='boundFunction({param: item})'>
{{item.myValue}}
</div>
在源中：
<my-directive
model='myData'
bound-function='myFunction(param)'>
</my-directive>
...在myFunction控制器中定义的位置。
请注意，param指令模板param在源代码中整洁地绑定到，并将其设置为item。
To call from within the link property of a directive ("inside" of it), use a very similar approach:
...
directive.link = function(isolatedScope) {
isolatedScope.boundFunction({param: "foo"});
};
...
return directive;
Yes, there is a better way: You can use the $parse service in your directive to evaluate an expression in the context of the parent scope while binding certain identifiers in the expression to values visible only inside your directive:
$parse(attributes.callback)(scope.$parent, { arg2: yourSecondArgument });
Add this line to the link function of the directive where you can access the directive's attributes.
Your callback attribute may then be set like callback = "callback(item.id, arg2)" because arg2 is bound to yourSecondArgument by the $parse service inside the directive. Directives like ng-click let you access the click event via the $event identifier inside the expression passed to the directive by using exactly this mechanism.
Note that you do not have to make callback a member of your isolated scope with this solution.
对我来说，以下工作：
在指令中这样声明：
.directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
scope: {
myFunction: '=',
},
templateUrl: 'myDirective.html'
};
})
在指令模板中，可以通过以下方式使用它：
<select ng-change="myFunction(selectedAmount)">
然后，当您使用指令时，像这样传递函数：
<data-my-directive
data-my-function="setSelectedAmount">
</data-my-directive>
您通过函数的声明传递函数，并从指令中调用该函数，并填充参数。
文章标签：angularjs , angularjs-directive , angularjs-scope , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！
文件下载
评论已关闭！