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

时间:2014-02-17 05:24:58

标签: javascript angularjs

jsfiddle

我在名为ball的指令中进行了ng-click。我正在尝试调用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>

3 个答案:

答案 0 :(得分:2)

您需要将test()方法从控制器传递到指令...

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

在指令中将&更改为=

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

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

答案 1 :(得分:1)

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

另一种方法是实现一个角度服务并在其中放置一个通用方法,在您需要的地方和指令调用函数中注入此服务,该函数将成为洞察隔离范围,并从指令调用函数

答案 2 :(得分:1)

您只需将指令中的控制器设置为:     控制器:'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'

};