Comportamento estranho de aninhados Angular directivas

Question

Eu quero usar o meu directivas no âmbito de outras directivas.O exemplo a seguir dá de modo estranho resultados que eu tive que desistir e fazer esta pergunta.Eu gostaria de alguém para me explicar o que está acontecendo aqui:

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>

A resultante DOM é:

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

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

É um bug?

EDITAR:

Resultado esperado DOM:

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

Answer 1

Em vez de usar replace nós vamos fazê-lo manualmente - o que parece manter angular feliz e você recebe o que você precisa.

1) Conjunto replace: false em vez de verdadeiro em Um e Dois.(fazendo angular feliz)

2) Substitua manualmente o html usando esta função link para Um e Dois:

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

Isto irá resultar em:

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

Os nós de texto foram cercados por B etiquetas de se livrar de gerado automaticamente, se Estende.

Aqui está atualizado violino: http://jsfiddle.net/WPpUL/7/

Answer 2

Enrole modelo com um elemento raiz irá corrigir o problema

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