goh
goh

Reputation: 29551

angularjs same directive names conflict

A noob question here. How do I avoid same directive names conflict when I'm using external modules. Currently I'm using the angular bootstrap module, but downloaded another module just to use the carousel from there instead. They both have the same directive names carousel and its causing me problems if I include both these in my module.

var app = angular.module('text', ['fundoo.directives', 'ui.bootstrap']);

What would be the best solution for this?

Upvotes: 6

Views: 4229

Answers (3)

aemonge
aemonge

Reputation: 2347

Actually all directive are executed, you may configure the order of execution with priority paramenter

Priority:

When there are multiple directives defined on a single DOM element, sometimes it is necessary to specify the order in which the directives are applied. The priority is used to sort the directives before their compile functions get called. Priority is defined as a number. Directives with greater numerical priority are compiled first. Pre-link functions are also run in priority order, but post-link functions are run in reverse order. The order of directives with the same priority is undefined. The default priority is 0.

And you may also tell angular to stop the directive digestion in current element whenever you find a directive that has the terminal parameter setted to true

https://docs.angularjs.org/api/ng/service/$compile

Still the soluction about creating priorities is a bit more complex to the problem, so i would stick to @nico 's soluction

and also, here's a plunker to test that angular executes both

http://plnkr.co/edit/e66I71UKp5mnurcjVzN4

Upvotes: 5

bevacqua
bevacqua

Reputation: 48516

If I'd were you I'd use a prefix for my own Angular directives/services/etc, that's what I've been doing lately and I don't have any clashing issues.

Alternatively, just rename the directive in question to something more verbose or specific.

Upvotes: 1

Pieter Herroelen
Pieter Herroelen

Reputation: 6066

If you only have one name clash between directives, list the module with the carousel you want to use as the first dependency. From my test I conclude that additional directives with the same name are ignored (first one wins).

Upvotes: 1

Related Questions