Come eseguire la nidificazione di nested in lavoro angolare?

Question

Non riesco a eseguire il lavoro di inclusione nidificata.

Esistono due direttive, che dichiarano entrambe di voler escludere il loro contenuto. Quando li annido, l'interno non ha alcun contenuto.

Ecco il violino this, che dimostra il mio problema.

Ecco il codice:

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

Si dovrebbe ng-transculde all'interno della direttiva interna in quanto transclude sostituisce il codice HTML interno

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

Nessun cambiamento alla direttiva interiore necessaria.

Ho aggiornato il violino here

Answer 2

Un altro modo per fare questo, che può essere utile in sé componenti contenuti viene visualizzato nel 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>' 
    }; 
}); 

Questa passerà il transclude: true l'albero dom al direttiva interna.

Il rovescio della medaglia è che la non può essere utilizzato da solo e nel jsfiddle viene generata ngTransclude: Orphan Directive Error

A causa di questo ho bisogno che la direttiva inner essere un bambino della direttiva outer, in questo modo sarà sempre far passare la transclusione ad essa.

È davvero bello suddividere le direttive di grandi dimensioni in quelle più piccole.