Question

如何让我的指令调用父控制器的功能？我的指令看起来像这样：

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: '@'
        }
    }
});

http://jsfiddle.net/7q9v3zz2/

当我点击Click Me from body链接时，它会按预期显示控制台日志消息。但是，当我点击Click Me from directive时没有任何反应。我怎样才能使它有效？

Answer 1

您正在使用隔离范围，因此您无法直接访问父范围，因为它们不会继承到隔离范围。您可以使用$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()" />

<强> Fiddle

您还可以使用子范围创建而不是隔离范围，并直接调用父控制器方法。这是demo

Angular指令调用父控制器函数

1 个答案: