Wie verschachtelte Transclusion in eckige Arbeit zu machen?

Question

Ich kann keine geschachtelten Transclosions arbeiten.

Es gibt zwei Direktiven, von denen beide erklären, dass sie ihren Inhalt übertragen werden. Wenn ich sie neste, hat das Innere keinen Inhalt.

Hier ist this Geige, das zeigt mein Problem. Hier

ist der Code:

function Ctrl($scope) { 
    $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...'; 
} 

angular.module('transclude', []) 
.directive('outer', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     scope: {}, 
     template: '<div style="border: 1px solid black;">' + 
       '<div>Outer</div>' + 
       '<inner ng-transclude></inner>' + 
       '</div>' 
    }; 
}).directive('inner', function(){ 
    return { 
     restrict: 'E', 
     transclude: true, 
     replace: true, 
     template :'<div style="border: 1px solid red;">' + 
        '<div>Inner</div>' + 
        '<div ng-transclude></div>' + 
        '</div>' 
    }; 
}); 

Answer 1

Sie sollten innerhalb der inneren Richtlinie ng-transculde seit transcluden die innere html benötigt

angular.module('transclude', []).directive('outer', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<div style="border: 1px solid black;">' + 
      '<div>Outer</div>' + 
      '<inner><div ng-transclude></div></inner>' + 
      '</div>' 
     }; 
}); 

Keine Änderung der inneren Richtlinie ersetzt.

ich die Geige aktualisiert here

Answer 2

Ein anderer Weg, dies zu tun, die in sich selbst nützlich sein kann Komponenten enthalten in this JSFiddle

.directive('outer', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<div style="border: 1px solid black;">' + 
       '<div>Outer</div>' + 
       '<inner></inner>' + 
       '</div>' 
    }; 
}) 
.directive('inner', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     require: '^outer', 
     template :'<div style="border: 1px solid red;">' + 
        '<div>Inner</div>' + 
        '<div ng-transclude></div>' + 
        '</div>' 
    }; 
}); 

angezeigt wird

Dies wird die transclude: true auf der dom Baum zum Pass innere Richtlinie.

Die Kehrseite der Medaille ist, dass das nicht von selbst und in der jsfiddle verwendet werden kann, wirft es eine ngTransclude: Orphan Directive Error

diesen Weil ich verlangen, dass die inner Richtlinie ein Kind der outer Richtlinie sein, auf diese Weise wird es immer habe die Übertragung auf ihn übertragen.

Das ist wirklich schön, große Anweisungen in kleinere aufzuteilen.