Comment imbriquer deux directives sur le même élément dans AngularJS?

Supprime remplacer: true sur la directive par nom "ol' ..

Cela devrait aussi résoudre .

Mise à Jour de violon : mise à jour de violon

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

Analyse :

Qu'est-ce qui a causé le problème ?

Avec replace=true pour la directive lw ce qui se passe est que lw a une portée isolate, maintenant comme replace=true, l'élément remplacé qui a lui-même une portée isolate a été essayé d'être remplacé, donc ce que vous avez fait inconsciemment est que vous avez essayé de donner deux étendues pour le même élément listie.

Observation de niveau de Code en angulaire.version js 1.2.1:

Ligne 5728: function applyDirectivesToNode est la fonction qui exécute la compilation sur la directive et ici à la ligne 5772, ils vérifient si nous essayons d'attribuer une portée en double ou en d'autres termes le même élément avec deux portées .

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));
      }
    }

Ci-dessus est la fonction qui fait cette vérification et si dans le cas où il y a une tentative d'attribuer deux étendues au même élément, elle lance cette erreur . Donc, c'est comme ça qu'il est conçu pour être et non un bug .

Pourquoi remplacer:vrai suppression résout le problème ?

En supprimant replace: true ce qui s'est passé est au lieu de la nouvelle directive listie remplacée au lieu de lw, elle y a été ajoutée , donc c'est une portée isolée imbriquée dans une autre, ce qui est absolument correct et autorisé . la portée d'isolat imbriquée est comme

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

Pourquoi l'emballage dans un div fonctionnera également (c'est votre solution que vous avez considérée comme solution de contournement) ?

Le point à noter est que le div n'est pas un élément avec une portée isolate séparée .c'est juste un élément. ici, sur replace, vous attachez la portée isolate de lw à attacher à un div . (NOTE: le div en lui-même n'a pas de portée d'isolement), il n'y a donc pas de 2 portées d'isolement attachées au même élément div . il n'y a donc pas de duplication, donc l'étape d'assert est passée et elle a commencé à fonctionner .

Voici donc comment il est conçu pour fonctionner et certainement ce n'est pas un bogue .