AngularJS：如何将参数/函数传递给指令？

看看这个小提琴 ，我有什么要改变，模板中的expression式使用我在HTML中定义的参数进行评估？ 保存button应该调用控制器的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(); }; } } }); 

我真的没有看到这一点。 感谢帮助！

Answer 1

您可以设置与property: '='双向数据绑定property: '='如罗伊build议。 所以如果你想把key和value绑定到本地范围，你可以这样做

 scope: { key: '=', value: '=' }, 

既然你传递了这些值，你可以在你的指令控制器中访问它们。 但是，如果你想在父范​​围的上下文中运行一个函数，这似乎是你想要做的accept属性，那么你需要告诉angular这样

 scope: { accept: "&" } 

现在，从你的save方法，你可以调用通过accept传递的函数

 controller: function($scope, $element, $attrs, $location) { $scope.save= function() { $scope.accept() }; } 

这是一个jsfiddle

Answer 2

 scope: { accept: "&" } 

使用小写字母作为函数名，否则不起作用。

Answer 3

只是一个简短的说明，你不需要包装function保存。 只需在模板中调用它：

'<button type="submit" x-ng-click="accept()">SAVE</button></div>',

转置函数调用并按预期传递参数。

这简化了代码，使阅读起来更容易。