javascript - 在 Angularjs 中使用多个指令

Question

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

我可以像这样使用 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;

            }

        };

    });

Answer 1

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

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

这里有一些想法:

1. 我认为 controller: function () {} 在向下执行，而 link: function () {} 在向下执行备份方式(发生在它沿着 DOM 树走下去之后)，这意味着您需要将依赖于其他 Controller 的代码从指令 Controller 移动到指令链接函数。

2. 利用require 的指令只能在父元素(使用^)或当前元素上要求指令。最初，您的 html 中有所有元素的 sibling 。如果需要的话，您需要将所有 sibling 包装在第四个指令中，它们都“require”。

3. 当您执行 require: [] 时，一个数组被传递到链接函数中。因此:

   link: function(scope, element, attrs, controllers) {
     var parent1 = controllers[0];
     var other = controllers[1];
   }
   

这是否回答了所有问题？