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

Answer 1

In my case I had a bootstrap-ui accordion-group directive on an element that had ng-repeat:

<accordion-group is-open="status.open" ng-repeat="receipt in receipts">

And solved it by doing this:

<div ng-repeat="receipt in receipts">
    <accordion-group is-open="status.open">

Answer 2

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 3

I was using Avengers example and after updating to angular 1.4 I started getting this. As it turned out, it had a controller and a directive fighting for scope on the same line

   <div my-directive ng-controller="myController as vm"></div>

So moved the controller to a separate scope to fix it.

<div my-directive >
<div ng-controller="myController as vm">
</div>
</div> 

Answer 4

I managed to fix it by replacing the template code in the wrapper directive. Here's the update fiddle. This is what changed.

template: '<div><listie items="items"></listie></div>',
//template: '<listie items="items"></listie>', bug?

This solves my problem, but it looks like a bug to me. I guess I'll create an issue on Github.

There - https://github.com/angular/angular.js/issues/5428

Answer 5

The accepted response here solved the problem for me.

Essentially remove the isolated scope from the directive and instead pass the scope property via the directive's link function (in the attributes parameter).

Answer 6

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.