AngularJS:如何将参数/函数传递给指令?
Posted
技术标签:
【中文标题】AngularJS:如何将参数/函数传递给指令?【英文标题】:AngularJS: How to pass arguments/functions to a directive? 【发布时间】:2012-11-23 10:31:32 【问题描述】:看看this Fiddle,我需要改变什么,模板中的表达式使用我在 html 中定义的参数进行评估? SAVE-按钮应该调用控制器的blabla()
-function,因为我通过了吗?
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();
;
);
我并没有真正看透这一点。感谢您的帮助!
【问题讨论】:
【参考方案1】:您可以按照 Roy 的建议使用 property: '='
设置两种方式的数据绑定。因此,如果您希望将 key
和 value
都绑定到本地范围,您可以这样做
scope:
key: '=',
value: '='
,
由于您正在传递这些值,因此您可以在指令的控制器中访问它们。但是如果你想在父作用域的上下文中运行一个函数,这似乎是你想用 accept
属性做的事情,那么你需要像这样告诉 angular
scope:
accept: "&"
现在,从您的 save
方法中,您可以调用通过 accept
传递的函数
controller: function($scope, $element, $attrs, $location)
$scope.save= function()
$scope.accept()
;
这是jsfiddle
【讨论】:
有什么方法可以将指令中的变量传递给传递给它的函数? 找到了我自己问题的答案。您必须命名所涉及的参数。在这里找到答案:whatibroke.com/?p=894【参考方案2】:scope:
accept: "&"
函数名使用小写字母,否则不起作用。
【讨论】:
为什么这种东西只在周五下午出现?谢谢,伙计。 你不需要使用小写字母,只要知道如果你把它写成'acceptSomething',你会在标记中将它称为'accept-something'【参考方案3】:请注意,您不需要保存包装功能。只需在模板中调用它:
'<button type="submit" x-ng-click="accept()">SAVE</button></div>',
转置函数调用并按预期传递参数。
这简化了代码并使其更易于阅读。
【讨论】:
以上是关于AngularJS:如何将参数/函数传递给指令?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Promise 将参数传递给 AngularJS 中的函数
MobileFirst:如何使用 angularJS 将参数传递给适配器
AngularJS:如何通过 ng-href 将多个参数传递给控制器?