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 piled 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;

            }

        };

    });

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 piled 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;

            }

        };

    });

• javascript
• angularjs
• angularjs-directive
• require

Share Improve this question Follow edited Aug 26, 2014 at 14:13 user1005240 asked Aug 26, 2014 at 13:16 user1005240user1005240 28544 silver badges1515 bronze badges 2

• Can you put all three directives in a fiddle or plunker? The only thing I see wrong is in the link function the function receives an array of controllers, not each controller individually (unless that's changed). – Jesus is Lord Commented Aug 26, 2014 at 13:34
• 1 Here's a plunker to what I am trying to do but it still doesnt seem to be working and again, I am unsure why. – user1005240 Commented Aug 26, 2014 at 15:00

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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?

You need a ma after the require statement

require:['^parentDirective','otherDirective'], //<--- right there

Here's a plunker to show it working while requiring multiple directives