How to nest two directives on the same element in AngularJS?

Question

When I try to nest two directives on the same element I get the following error. Nested "E" directives - Multiple directives [...] asking for new/isolated scope, I want to nest two "E" isolated scoped directives, like in this fiddle. (To actually reproduce the problem, you need to uncomment the <lw> directive)

I keep getting this error that I don't understand/know how to fix:

Error: [$compile:multidir] Multiple directives [lw, listie] asking for new/isolated scope on: <listie items="items items"> 

Wasn't this supposed to work? Thanks!

Answer 1

remove replace: true on the directive by name 'lw' ..

That should also solve .

updated fiddle : updated fiddle

app.directive('lw', function(){     return {         restrict: 'E',         scope: {             items: "="         },         template: '<listie items="items"></listie>',         controller: function($scope) {         }     } }); 

Analysis :

what caused the problem ?

with replace=true for the lw directive what happens is lw has isolate scope, now as replace=true , the replaced element which itself has isolate scope was tried to be replaced there, so what you unknowingly did is you tried to give two scopes for the same element listie.

code level observation in angular.js version 1.2.1:

line 5728 : function applyDirectivesToNode is the function that executes compile on directive and here in line 5772 they do this checking if we are trying to assign duplicate scope or in other words same element with two scopes .

function assertNoDuplicate(what, previousDirective, directive, element) {       if (previousDirective) {         throw $compileMinErr('multidir', 'Multiple directives [{0}, {1}] asking for {2} on: {3}',             previousDirective.name, directive.name, what, startingTag(element));       }     } 

above is the function which does that check and if in case there is an attempt to assign two scopes to same element it flings that error . So this is how it is designed to be and not a bug .

why replace:true removal solves the problem ?

by removing replace:true what happened is instead of new directive listie replaced instead of lw , it got appended into it , so it is one isolated scope nested into other, which is absolutely correct and allowed . the nested isolate scope is like

<lw items="items" class="ng-isolate-scope">    <div items="items" class="ng-isolate-scope">         ..........    </div> </lw> 

why wrapping in a div will also work (this is your solution which you considered to be workaround) ?

The point to be noted is that the div is not an element with a separate isolate scope .It is just an element. here on replace you are attaching the isolate scope of lw to be attached to a div . (NOTE : The div by itself does not have an isolate scope ), so there is no 2 isolate scopes attached to same element div . so there is no duplication so the assert step passed and it started working .

So this is how it is designed to work and definitely its not a bug .

Answer 2

Just for interest sake, I had the same error. It turned out because I did the old "Cut and Paste" to create a new directive and they had the same name to start with. I forgot to change it which produced this error.

So for anyone who is as bad as me then here's a possible solution to check.