Angular指令調用父控制器函數

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()" />

小提琴

您也可以使用子范圍創建而不是隔離范圍來直接調用父控制器方法。 這是一個演示