如何在角度工作中进行嵌套转换？

Question

我不能进行嵌套的翻译工作.

有两个指令,这两个指令都声明它们将转换它们的内容.当我嵌套它们时,内部没有任何内容.

下面是这个小提琴,演示我的问题.

这是代码:

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

你应该在内部指令中进行转换,因为transclude会替换内部html

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

不需要改变内部指令.

我在这里更新了小提琴