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;

            }

        };

    });

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
– Jesus is Lord, Commented Aug 26, 2014 at 13:34
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
– user1005240, Commented Aug 26, 2014 at 15:00

Jesus is Lord · Accepted Answer · 2014-08-26 16:29:06Z

7

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

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

Here were some thoughts:

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.
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".

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?

answered Aug 26, 2014 at 16:29

Jesus is Lord

15.5k11 gold badges71 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1005240 Over a year ago

Thanks for your insight, the problem that I faced was two fold, firstly I was trying to access a method in a directive found in an unrelated module (not a parent or in the module calling the method), this, I did not know, was not allowed. My second issue was that I was not accessing the controller elements correctly in the link function. Thanks for your answer :)

Dan-Nolan · Accepted Answer · 2014-08-26 14:05:38Z

3

You need a comma after the require statement

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

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

edited Aug 26, 2014 at 14:05

answered Aug 26, 2014 at 13:35

Dan-Nolan

6,6574 gold badges29 silver badges32 bronze badges

3 Comments

user1005240 Over a year ago

Hi Dan thanks for the reply, that is a typo on my part, the working code actually has a comma, i have changed the example code to fix that typo. Also thanks for your plunkr example it works as expected however in your example all directives are contained within the one module, in my example both directives called in the require exist outside the example module, so although your example works, it still does not help my situation.

Dan-Nolan Over a year ago

@user1005240 Ah okay. Based on what I understand from your question it seems that you're trying to nest modules, which is explicitly not allowed according to the documentation: docs.angularjs.org/api/ng/directive/ngApp It says that AngularJS applications cannot be nested within each other

user1005240 Over a year ago

As far as I am aware I'm not nesting them exactly, what I am creating is a large application with multiple modules that are loaded in where nescessary some of these modules are linked to each other as dependencies which is fine and allows data to be passed down through the different modules. Some of these modules contain directive methods that I need to access outside of their module controllers which I can do when i 'require' only a single string (the directive name) but when i use the string array format for multiple 'require' directives it does not work.

Collectives™ on Stack Overflow

Using multiple directives in require with Angularjs

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related