Странное поведение вложенных угловых директив

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>

.

Полученный дом:

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

.

jsfiddle: http://jsfiddle.net/wppul/ P >.

Это ошибка?

Редактировать:

Ожидаемый выход 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 вместо верности в одном и двух.(Создание угловой части)

2) вручную Замените HTML, используя эту функцию ссылки на один и два:

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, чтобы избавиться от Автоматически сгенерированные промежутки.

Вот обновленная скрипка: http://jsfiddle.net/wppul/7/ .

Answer 2

Шаблон обертывания с корневым элементом исправит проблему

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

.