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(); }; } } }); 

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

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

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

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

 scope: { accept: "&" } 

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

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

这是一个jsfiddle

 scope: { accept: "&" } 

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

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

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

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

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