How to use two custom directives in a single HTML element

Question

I have two custom directives; namely directiveA and directiveB. Both are custom directives performing two different actions

<input type="text"
       name="order_value"
       data-ng-model=""
       directive-a="{{formatText}}"
       directive-b="{{test}}"/>

But when I use both directives, the element is not shown. If I use only one of the directives it's working properly.

My console is displaying the following error.

Error: error:multidir Multiple Directive Resource Contention

What should I do to be able to use both my directives on the same element?

Can you post full example code here or create fiddle demonstrating your problem? — Jenish Rabadiya, Feb 23 '15 at 11:24
Jenish, directive-a and directive-b are plugin, cannot post it fully — user2324085, Feb 23 '15 at 11:31
Error: error:multidir Multiple Directive Resource Contention Mr. dfsq — user2324085, Feb 23 '15 at 11:44
Are you using attributes with the same name as the directive in your directive declaration. e.g. `` Then you might have Directive resource contention. Or your directive attribute names are conflicting with each other? [here is a link](http://stackoverflow.com/questions/27084849/angularjs-multiple-directive-resource-contention) which should help you. HTH! — amitthk, Feb 23 '15 at 11:59

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

From the docs:

Description

This error occurs when multiple directives are applied to the same DOM element, and processing them would result in a collision or an unsupported configuration.

To resolve this issue remove one of the directives which is causing the collision.

Example scenarios of multiple incompatible directives applied to the same element include:

Multiple directives requesting isolated scope.

Multiple directives publishing a controller under the same name.

Multiple directives declared with the transclusion option.

Multiple directives attempting to define a template or templateURL.

Following this post you could also try to remove replace: true from your directives.

score -1 · Answer 2 · answered Feb 23 '15 at 15:32

-1

After a long try, I have found the Simple Solution for the above issue.

if u have scope set to true ie.,scope: true in the directive, Set to false scope: false

answered Feb 23 '15 at 15:32

user2324085

63
1
3
11

How to use two custom directives in a single HTML element

2 Answers2