從angular中的指令調用父控制器的函數

Question

jsfiddle

我在名為ball的指令中進行了ng單擊。 我正在嘗試調用MainCtrl的函數test()並警告ng-repeat's alignment球ng-repeat's alignment的值。 為什么我無法識別MainCtrl的測試功能？ var $ scope; var app = angular.module（'miniapp'，[]）;

app.controller('MainCtrl', function($scope) {
    $scope.project = {"name":"sup"};

    $scope.test = function(value) {
        alert(value);   
    }
    $scope.test2 = function(value) {
        alert('yo'+value);   
    }

}).directive('ball', function () {
        return {
            restrict:'E',
            scope: {
                'test': '&test'
            },
            template: '<div class="alignment-box" ng-repeat="alignment in [0,1,2,3,4]" ng-click="test(alignment)" val="{{alignment}}">{{alignment}}</div>'

        };
    });

html

<div ng-app="miniapp">
   <div ng-controller="MainCtrl">
       {{project}}
       <ball></ball>
   </div>
</div>

Answer 1

您需要將test()方法從控制器傳遞到指令中...

<div ng-app="miniapp">
   <div ng-controller="MainCtrl">
       {{project}}
       <ball test="test"></ball>
   </div>
</div>

在指令中將&更改為=

scope: {
    'test': '=test'
}

小提琴： http : //jsfiddle.net/89AYX/49/

Answer 2

一種方法是不隔離指令范圍...只需從指令中刪除范圍對象。

另一種方法是實現一個角度服務，並在其中放置一個通用方法，將該服務注入到您需要的任何地方，並在將成為洞察力隔離范圍的指令調用函數中，並從指令中調用函數

Answer 3

您只需要在指令中將控制器設置為：controller：'MainCtrl'

因此您指令的代碼應如下所示：

return {
    restrict:'E',
    scope: {
        'test': '&test'
    },
    template: '<div class="alignment-box" ng-repeat="alignment in [0,1,2,3,4]" ng-click="test(alignment)" val="{{alignment}}">{{alignment}}</div>',
    controller: 'MainCtrl'

};