سلوك غريب للتوجيهات الزاوية المتداخلة

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>'
    };
});

أتش تي أم أل:

    <outer>whatever</outer>
    <one></one>
    <two></two>
    <outer>something</outer>

دوم الناتج هو:

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

جسفيدل: http://jsfiddle.net/WPpUL/

هل هو خلل?

تحرير:

الناتج المتوقع دوم:

    <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) استبدال هتمل يدويا باستخدام وظيفة الارتباط هذه إلى واحد واثنين:

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

قالب التفاف مع عنصر الجذر سيؤدي إلى إصلاح المشكلة

giveacodicetagpre.