javascript - angularjs same directive names conflict - Stack Overflow

admin管理员组

文章数量:1313615

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?

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?

• javascript
• angularjs

Share Improve this question Follow asked Dec 12, 2013 at 14:54 gohgoh 29.6k3030 gold badges9494 silver badges156156 bronze badges 4

• I had the same issue with a custom directive called 'match' conflicting with one within angular boostrap. I renamed my directives with the prefix of the project to make sure they are unique. – Alexandre Nucera Commented Dec 12, 2013 at 15:12
• 1 UI Bootstrap let's you build your own version with only the modules you need. Or simply rename the carousel directive to something else in either one of your libraries. – Stewie Commented Dec 12, 2013 at 15:15
• Can you clarify "causing me problems" ? – Pieter Herroelen Commented Dec 12, 2013 at 16:09
• 2 I don't understand why people can't namespace their directives when they make a library for other people to use. What is so wrong with the Angular UI people making ui-carousel instead of carousel? If everyone did this, software projects would have one less thing that could break. ^_^ – Aaron Gray Commented Apr 20, 2014 at 23:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 pile functions get called. Priority is defined as a number. Directives with greater numerical priority are piled 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/api/ng/service/$pile

Still the soluction about creating priorities is a bit more plex 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

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

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.

本文标签： javascriptangularjs same directive names conflictStack Overflow