중첩된 Angular 지시문의 이상한 동작

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) 세트 replace: false One과 Two에서는 사실이 아닙니다.(Angular를 행복하게 만들기)

2) 이 링크 기능을 사용하여 html을 One과 Two로 수동으로 바꿉니다.

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> 

텍스트 노드를 제거하기 위해 B 태그로 둘러싸여 있습니다. 자동으로 생성된 SPAN.

업데이트된 바이올린은 다음과 같습니다. http://jsfiddle.net/WPpUL/7/

Answer 2

루트 요소가있는 템플릿을 랩핑하면 문제가 해결됩니다.

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

.