AngularJS Two directives with the same module name

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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 () {});

Method 2

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 () {
    ....
}]);

Method 3

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

Method 4

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 () {

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply