如何获得我的指令以调用父级的控制器功能？我有一个如下所示的指令：
HTML：
<div ng-app="myapp" ng-controller="mainController as mainCtrl">
some body text<br>
<a href="javascript:;" ng-click="mainCtrl.myfunc()">Click Me from body</a>
<photo photo-src="abc.jpg" caption="This is so Cool" />
</div>
Javascript：
var app = angular.module('myapp',[]);
app.controller('mainController', function(){
var vm = this;
vm.myfunc = myfunc;
function myfunc(){
console.log("Log from myfunc");
}
});
app.directive('photo',function(){
return {
restrict: 'E',
template: '<figure> <img ng-src="{{photoSrc}}" width="500px"> <figcaption>{{caption}}</figcaption> <a href="javascript:;" ng-click="mainCtrl.myfunc()">Click Me</a></figure>',
replace: true,
scope: {
caption: '@',
photoSrc: '@'
}
}
});
当我单击Click Me from body链接时，它会按预期显示控制台日志消息。但是，当我单击时，什么也没有发生Click Me from directive。我该如何运作？
您正在使用隔离范围，因此您不能直接访问父范围，因为它们没有继承到隔离范围。您可以使用$parent（通过这样做ng-click="$parent.mainCtrl.myfunc()"）。但是，这变得很丑陋，并且与它的父级紧密耦合，相反，您可以使用函数绑定（&）。
return {
restrict: 'E',
template: '<figure> <img ng-src="{{photoSrc}}" width="500px"> <figcaption>{{caption}}</figcaption>
<a href="javascript:;" ng-click="onClick()">Click Me from directive</a></figure>',
replace: true,
scope: {
caption: '@',
photoSrc: '@',
onClick: '&' //<-- Accept function binding and use it in the template
}
}
并在消费者级别进行注册，以使它变得更加可重用。
<photo photo-src="abc.jpg" caption="This is so Cool" on-click="mainCtrl.myfunc()" />
您还可以使用子范围创建而不是隔离范围来直接调用父控制器方法。这是一个演示
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句