从 angular 指令调用父控制器的函数

Question

jsfiddle

我在名为 ball 的指令中有一个 ng 单击。 我试图调用MainCtrl的函数test()并提醒球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

您只需要将指令中的控制器设置为： 控制器："主控制"

因此，指令的代码应如下所示：

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'
};

Answer 3

一种方法是不隔离指令范围...只需从指令中删除范围对象即可。

另一种方法是实现一个角度服务并在那里放置一个通用方法，在您需要它的任何位置注入此服务，并在指令调用函数中，该函数将是洞察隔离的范围，并从指令调用函数