入れ子の角度指令の奇妙な行動

Question

他の指令の中で私の指令を使いたいです。次の例では、私があきらめてこの質問をしなければならなかったので奇妙な結果を与えます。私は誰かがここで何が起こっているのかを説明したいのですが：

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>

.

結果のDOMは次のとおりです。

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

.

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

それはバグですか？

編集：

予想出力DOM：

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

.

Answer 1

replaceを使用する代わりに、手動でそれを行います - これは角質幸せを保つようです、そしてあなたが必要なものを手に入れます。

1） 1つと2つのtrueではなくreplace: falseを設定します。（角ハッピー）

2）このリンク関数を使ってHTMLを手動で1,2に置き換える：

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

.

これには次のようになります。

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

.

テキストノードは、自動生成されたスパンを自動的に生成する

これは更新されたフィドルです：> http://jsfiddle.net/wppul/7/

Answer 2

ルート要素を持つラップテンプレートは問題を解決します

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

.