CODEWITHSUNDEEP
angularjs
ianaz
ianaz

Reputation: 2580

AngularJS Two directives with the same module name

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

Upvotes: 13

Views: 11173

Answers (4)

C1pher
C1pher

Reputation: 1972

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

Upvotes: 2

rvignacio
rvignacio

Reputation: 1740

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

Upvotes: 19

D.Evangelista
D.Evangelista

Reputation: 6543

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

Upvotes: 5

J&#233;r&#233;my Dutheil
J&#233;r&#233;my Dutheil

Reputation: 6137

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

Upvotes: 1

Related Questions