Javascript AngularJS：如何将参数/函数传递给指令？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13725938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: How to pass arguments/functions to a directive?
提问by user1879408
Look at this Fiddle, what do I have to change, that the expressions in the template get evaluated using the arguments I defined in the HTML? The SAVE-button should call the blabla()-function of the controller, since I pass it?
看看这个 Fiddle，我需要改变什么，使用我在 HTML 中定义的参数评估模板中的表达式？保存按钮应该调用blabla()控制器的函数，因为我通过了它？
var myApp = angular.module('MyApp',[])
myApp.directive('editkeyvalue', function() {
return {
restrict: 'E',
replace: true,
scope: {
accept: "expression"
},
template : '<div><label class="control-label">{{key}}</label>' +
'<label class="control-label">{{key}}</label>' +
'<input type="text" ng-model="value" />'+
'<button type="button" x-ng-click="cancel()">CANCEL</button>' +
'<button type="submit" x-ng-click="save()">SAVE</button></div>',
controller: function($scope, $element, $attrs, $location) {
$scope.save= function() {
$scope.accept();
};
}
}
});
I do not really see through that. Thanks for help!
我真的看不透。感谢帮助！
采纳答案by jaime
You can set two way data binding with property: '='as Roy suggests. So if you want both keyand valuebound to the local scope you would do
您可以property: '='按照 Roy 的建议设置两种方式的数据绑定。所以如果你想要两者key并value绑定到本地范围，你会做
scope: {
key: '=',
value: '='
},
Since you are passing these values, you have access to them in your directive's controller. But in case you want to run a function in the context of the parent scope, which seems to be what you want to do with the acceptattribute, then you would need to tell angular like this
由于您正在传递这些值，因此您可以在指令的控制器中访问它们。但是如果你想在父作用域的上下文中运行一个函数，这似乎是你想要对accept属性做的事情，那么你需要像这样告诉 angular
scope: {
accept: "&"
}
Now, from your savemethod you could call the function passed via accept
现在，从您的save方法中，您可以调用通过accept
controller: function($scope, $element, $attrs, $location) {
$scope.save= function() {
$scope.accept()
};
}
Here's a jsfiddle
这是一个jsfiddle
回答by jaime
scope: {
accept: "&"
}
Use lowercase letters for function names, otherwise it doesn't work.
函数名使用小写字母，否则不起作用。
回答by Gary Blake
Just a quick note that you dont need the wrapping function save. Just call this in the template:
请注意，您不需要保存包装功能。只需在模板中调用它：
'<button type="submit" x-ng-click="accept()">SAVE</button></div>',
'<button type="submit" x-ng-click="accept()">SAVE</button></div>',
That transposes the function call and passes the parameters as expected.
这会转置函数调用并按预期传递参数。
This simplifies code and makes it a lot easier to read.
这简化了代码并使其更易于阅读。
