Comportement étrange des directives angulaires imbriquées

Question

Je souhaite utiliser mes directives dans d'autres directives.L'exemple suivant donne des résultats si étranges que j'ai dû abandonner et poser cette question.J'aimerais que quelqu'un m'explique ce qui se passe ici :

var app = angular.module('blah', []);

app.directive('one', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<outer>one</outer>'
    };
});

app.directive('two', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<outer>two</outer>'
    };
});

app.directive('outer', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<div ng-transclude></div>'
    };
});

HTML :

    <outer>whatever</outer>
    <one></one>
    <two></two>
    <outer>something</outer>

Le DOM résultant est :

    <div ng-transclude=""></div>
    <outer></outer>
    <two></two>
    <outer>something</outer> 

JSFiddle : http://jsfiddle.net/WPpUL/

Est-ce un bug ?

MODIFIER:

Sortie DOM attendue :

    <div ng-transclude>whatever</div>
    <div ng-transclude>one</div>
    <div ng-transclude>two</div>
    <div ng-transclude>something</div>

Answer 1

À la place d'utiliser replace nous le ferons manuellement - cela semble garder angulaire heureux et vous apporte ce dont vous avez besoin.

1) Ensemble replace: false au lieu de vrai dans Un et Deux.(rendre angulaire heureux)

2) Remplacez manuellement le code HTML en utilisant cette fonction de lien vers One et Two :

link: function(scope, element, attrs) {
    element.replaceWith(element.html());
}

Cela se traduira par :

<div ng-transclude=""><b class="ng-scope">whatever</b></div>
<div ng-transclude=""><b class="ng-scope">one</b></div>
<div ng-transclude=""><b class="ng-scope">two</b></div>
<div ng-transclude=""><b class="ng-scope">something</b></div> 

Les nœuds de texte ont été entourés de balises B pour s'en débarrasser SPAN générés automatiquement.

Voici le violon mis à jour : http://jsfiddle.net/WPpUL/7/

Answer 2

gabarit d'enveloppe avec un élément racine résoudra le problème

template: '<div><outer>one</outer></div>'
template: '<div><outer>two</outer></div>'