Làm thế nào để thực hiện chuyển đổi lồng nhau trong công việc góc?

Question

Tôi không thể thực hiện công việc chuyển đổi lồng nhau.

Có hai chỉ thị, cả hai đều tuyên bố rằng chúng sẽ chuyển tải nội dung của chúng. Khi tôi lồng chúng, bên trong không có bất kỳ nội dung nào.

Đây là this fiddle, điều đó chứng tỏ sự cố của tôi.

Đây là mã:

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

Bạn nên ng-transculde bên trong chỉ thị nội kể từ transclude thay thế html bên trong

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

Không có thay đổi để chỉ thị bên trong cần thiết.

Tôi đã cập nhật fiddle here

Answer 2

Một cách khác để làm điều này, có thể hữu ích trong việc khép kín thành phần được hiển thị trong 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>' 
    }; 
}); 

này sẽ vượt qua transclude: true xuống cây dom đến chỉ thị bên trong.

Nhược điểm của việc này là không thể được sử dụng bởi chính nó và trong jsfiddle nó ném một

Bởi vì điều này tôi yêu cầu chỉ thị inner là một đứa trẻ của chỉ thị outer, cách ngTransclude: Orphan Directive Error rằng nó sẽ luôn luôn có sự chuyển đổi được truyền xuống.

Điều này thực sự tốt để chia nhỏ chỉ thị thành các chỉ thị nhỏ hơn.