Seltsames Verhalten verschachtelter Angular-Anweisungen

Question

Ich möchte meine Anweisungen in anderen Anweisungen verwenden.Das folgende Beispiel liefert so seltsame Ergebnisse, dass ich aufgeben und diese Frage stellen musste.Ich möchte, dass mir jemand erklärt, was hier vor sich geht:

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>

Das resultierende DOM ist:

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

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

Ist es ein Fehler?

BEARBEITEN:

Erwartetes Ausgabe-DOM:

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

Answer 1

Anstatt zu verwenden replace Wir machen es manuell – das scheint Angular glücklich zu machen und Ihnen das zu geben, was Sie brauchen.

1) Satz replace: false statt wahr in Eins und Zwei.(eckig glücklich machen)

2) Ersetzen Sie den HTML-Code mithilfe dieser Linkfunktion manuell durch Eins und Zwei:

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

Dies führt zu:

<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> 

Um die Textknoten zu entfernen, wurden sie von B-Tags umgeben automatisch generierte SPANs.

Hier ist die aktualisierte Geige: http://jsfiddle.net/WPpUL/7/

Answer 2

Wickelvorlage mit einem Wurzelelement fixiert das Problem

generasacodicetagpre.