在Angularjs中使用require中的多个指令

时间:2014-08-26 13:16:48

标签: javascript angularjs angularjs-directive require

我遇到需要访问多个指令控制器方法的情况。

我可以使用require这样从父指令访问方法:

    require:"^parentDirective"

但是我还需要在单独的指令(不是父指令)中访问方法,文档说到use an array of strings是这样的:

    require:["^parentDirective","directiveTwo"] 

但这样做会导致错误,尽管两个指令都已编译到DOM。

我在这里错过了什么吗?

这是我的指示:

    angular.module('testModule', ['parentModule'], function () {
    }).directive('testDirective', function() {
        return {
            restrict: 'AE',
            templateUrl: 'testTemplate.tpl.html',
            scope: {
                value1: "=",
                value2: "="
            },  
            require:['^parentDirective','otherDirective'],
            controller: function($scope,$modal,socketConnection) {

                if(case_x == true){
                    $scope.requiredController_1.ctrl1Func();
                }
                else if(case_x == false){
                    $scope.requiredController_2.ctrl2Func();
                }


            },
            link: function(scope,element,attrs,requiredController_1,requiredController_2){

                scope.requiredController_1 = requiredController_1;
                scope.requiredController_2 = requiredController_2;

            }

        };

    });

2 个答案:

答案 0 :(得分:7)

我认为这很接近你想要的(希望如此):

http://plnkr.co/edit/WO6SROdVFOYlR22JQJPb?p=preview

以下是一些想法:

  1. 我认为controller: function () {}是在向下的路上执行的,而link: function () {}是在备份的过程中执行的(在它沿着DOM树行走之后发生),这意味着你需要将依赖于其他控制器的代码从指令控制器移动到指令链接函数。

  2. 使用require的指令只能要求父元素(使用^)或当前元素的指令。你最初在你的html中拥有所有兄弟姐妹的元素。如果需要这样,你需要将所有兄弟姐妹包装在第四个指令中,他们都是“require”。

  3. 执行require: []时,会将数组传递给链接函数。因此:

    link: function(scope, element, attrs, controllers) {
      var parent1 = controllers[0];
      var other = controllers[1];
    }
    
  4. 这会回答一切吗?

答案 1 :(得分:3)

在require语句

之后需要逗号
require:['^parentDirective','otherDirective'], //<--- right there

这是一个plunker,显示它在需要多个指令时正常工作