Angular:在一个指令链接函数中调用控制器函数,使用&

我们遇到了一个问题,试图在我们的指令的链接函数中使用和号“&”来调用一个传入指令的函数。

看来这个函数在控制器上被调用,但是在调用中没有parameter passing。 我们所看到的所有例子都是通过在模板中创build呼叫来实现的。 有没有办法从你的指令模板上调用函数,然后在调用控制器函数的指令中做一些事情?

2 Solutions collect form web for “Angular:在一个指令链接函数中调用控制器函数,使用&”

你是否在{} s中传递参数? 例如,在指令的链接函数中,你需要像这样调用方法: scope.someCtrlFn({arg1: someValue});

 <div my-directive callback-fn="ctrlFn(arg1)"></div> 
 app.directive('myDirective', function() { return { scope: { someCtrlFn: '&callbackFn' }, link: function(scope, element, attrs) { scope.someCtrlFn({arg1: 22}); }, } }); function MyCtrl($scope) { $scope.ctrlFn = function(test) { console.log(test); } } 

小提琴 。

除了马克的回答之外,我想指出,你可以用&速记来留下一些信件。 这将假定HTML中引用的callback-fn scope.callbackFn在作用域中作为scope.callbackFn存在。 否则还是一样的,所以只有两条线要改变。 我保留马克的版本作为评论,所以你应该能够轻松地发现差异。

 <div my-directive callback-fn="ctrlFn(arg1)"></div> 
 app.directive('myDirective', function() { return { scope: { callbackFn: '&' }, //scope: { someCtrlFn: '&callbackFn' }, link: function(scope, element, attrs) { scope.callbackFn({arg1: 22}); //scope.someCtrlFn({arg1: 22}); }, } }); function MyCtrl($scope) { $scope.ctrlFn = function(test) { console.log(test); } } 
  • 如何把重点放在input字段?
  • Angular.js指令dynamic模板库
  • AngularJS ngRepeat元素删除
  • 从AngularJS指令访问属性
  • AngularJS指令:链接和编译function是否一起工作?
  • 在Angular Directive的链接函数中使用ng-click vs bind
  • angular度ng-bind-html和它内的指令
  • Angular指令如何给元素添加一个属性?
  • 在设置模型值时,Angular会将奇怪的选项添加到select元素中
  • 用ng-click自动传递$事件?
  • angular度ng-if或ng-show响应慢(2秒延迟?)