Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 415
goh Avatar asked Dec 12 '13 14:12

goh


3 Answers

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

like image 90
aemonge Avatar answered Oct 28 '22 17:10

aemonge


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

like image 35
Pieter Herroelen Avatar answered Oct 28 '22 19:10

Pieter Herroelen


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.

like image 36
bevacqua Avatar answered Oct 28 '22 18:10

bevacqua