Using multiple directives in require with Angularjs

Question

I have the situation where i need access to multiple directive controller methods.

I can access a method from a parent directive using the require like so:

    require:"^parentDirective"

but I also need to access a method within a seperate directive (not a parent), the documentation says to use an array of strings like so:

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

but doing this causes errors although the both directives have been compiled to the DOM.

Am I missing something here?

here is my directive:

    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

I think this is close to what you want (hopefully):

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

Here were some thoughts:

1. I think the controller: function () {} is executed on the way down, whereas the link: function () {} is executed on the way back up (which happens after it walks down the DOM tree), meaning you needed to move your code that depends on other controllers from the directive controller to the directive link function.

2. Directives that utilize require can only require directives on parent elements (using ^) or the current element. You had in your html, originally, your elements all siblings. If that needs to be the case you need to wrap all the siblings in a fourth directive that they all "require".

3. When you do require: [] an array is passed into the link function. Hence:

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

Does that answer everything?