Comportamiento extraño de las directivas angulares anidadas.

Question

Quiero usar mis directivas dentro de otras directivas.El siguiente ejemplo da resultados tan extraños que tuve que renunciar y hacer esta pregunta.Me gustaría que alguien me explique lo que está pasando aquí:

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>

El DOM resultante es:

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

jsfiddle: http://jsfiddle.net/wppul/

es un error?

Editar:

Salida esperada DOM:

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

Answer 1

En lugar de usar replace, lo haremos manualmente, esto parece mantenerse feliz y le da lo que necesita.

1) Establezca replace: false en lugar de verdadero en uno y dos.(Haciendo angular feliz)

2) Reemplace manualmente el HTML usando esta función de enlace a uno y dos:

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

Esto resultará en:

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

Los nodos de texto han sido rodeados de etiquetas B para deshacerse de spans generados automáticamente.

Aquí está el violín actualizado: http://jsfiddle.net/wppul/7/

Answer 2

Plantilla de envoltura con un elemento raíz solucionará el problema

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