AngularJS Two directives with the same module name

Question

Is it possible to create two directives with the same module name? Having this two files

angular.module('fabTemplate', [])
    .directive('fabGallery', [function () {
....

and

angular.module('fabTemplate', [])
    .directive('fabVideo', [function () {
...

The second directive will not be recognised.

<fab-video />

does not render anything. By changing the module name works though.

AngularJS's documentation says that the parameter name (first param of module "method")

The name of the module to create or retrieve.

I suppose that should work then... :S Angular doesn't print anything into the console

rvignacio · Accepted Answer · 2013-11-19 17:15:51Z

19

If you want to retrieve a module, then you must use only the first param of angular.module().

From the docs:

requires (optional) [Array.] : If specified then new module is being created. If unspecified then the the module is being retrieved for further configuration.

Your code should be something like:

//Module definition:
angular.module('fabTemplate', []);

//Get the module and add the first directive:
angular.module('fabTemplate').directive('fabGallery', function () {});

//Get the module and add the second directive:
angular.module('fabTemplate').directive('fabVideo', function () {});

answered Nov 19, 2013 at 17:15

rvignacio

1,7401 gold badge19 silver badges33 bronze badges

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

Comments

D.Evangelista · Accepted Answer · 2013-11-19 17:13:03Z

Its also written, in the beggining of the docs:

When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.

If you want to retrieve the module, you should pass only the module name in the second time, not the array.

So, you should write:

angular.module('fabTemplate', [])
    .directive('fabGallery', [function () {
        ....
    }]);

angular.module('fabTemplate')
    .directive('fabVideo', [function () {
        ....
    }]);

Note that you can write:

angular.module('fabTemplate', [])
    .directive('fabGallery', [function () {
        ....
    }])
    .directive('fabVideo', [function () {
        ....
    }]);

Or

var fabTemplate = angular.module('fabTemplate', []);

fabTemplate.directive('fabGallery', [function () {
    ....
}]);

fabTemplate.directive('fabVideo', [function () {
    ....
}]);

Community · Accepted Answer · 2017-05-23 11:59:56Z

2

You can have multiple directives in a single module.

angular.module('myModule', []).directive('first', function() {
angular.module('myModule').directive('second', function() {

You have to make sure that the square brackets from the first declaration are not in the others. Refer to this post: AngularJS module.directive not responding consistently

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Nov 19, 2013 at 17:46

C1pher

1,9726 gold badges34 silver badges52 bronze badges

Comments

Jérémy Dutheil · Accepted Answer · 2013-11-19 17:12:35Z

1

According to the documentation you link, when you put a second parameter to the module method, it explicitely call the creation of a module, and not a retrieve ; in fact, this parameter is optional, so you should be able to do something like this when you only want to retrieve your existing module :

angular.module('fabTemplate')
    .directive('fabVideo', [function () {

answered Nov 19, 2013 at 17:12

Jérémy Dutheil

6,1477 gold badges42 silver badges55 bronze badges

Collectives™ on Stack Overflow

AngularJS Two directives with the same module name

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related