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

我不能使嵌套转换工作

有两个指令，它们都声明将转置其内容。当我嵌套它们时，内部没有任何内容

这是小提琴，它显示了我的问题

代码如下：

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

函数Ctrl（$scope）{
$scope.text='Neque porro quisquam est qui dolorem ipsum quia dolor…'；
}
角度模块（'transclude'，[]）
.directive（'outer'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
作用域：{}，
模板：“”+
“外部”+
'' +
''
};
}).directive（'内部'，函数（））{
返回{
限制：'E'，
是的，
替换：正确，
模板：“”+
“内在的”+
'' +
''
};
});

由于transclude替换了内部html，因此应该在内部指令中使用ng transclude

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

angular.module（'transclude'，[]）.directive（'outer'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
模板：“”+
“外部”+
'' +
''
};
});

不需要更改内部指令

---

我已经更新了fiddle

另一种方法，在中显示的自包含组件中可能很有用

.directive（'outer'，function（）{
返回{
限制：'E'，
替换：正确，
是的，
模板：“”+
“外部”+
'' +
''
};
})
.directive（'内部'，函数（））{
返回{
限制：'E'，
替换：正确，
要求：“^outer”，
模板：“”+
“内在的”+
'' +
''
};
});

这将把

transclude:true

从dom树向下传递到内部指令

这样做的缺点是不能自己使用，并且在jsfiddle中抛出

因此，我要求

内部

指令是

外部

指令的子指令，这样它将始终将转换传递给它

---

将大指令分解为小指令真是太好了。

谢谢。现在看来这是显而易见的需要注意的一点是，这种方法添加了额外的标记，如果您进行深度嵌套，可能会有点混乱。转移：

元素

避免了这种情况。但对于您的使用，这两种方法都可能是好的。@KayakDave如果我们删除这个额外的标记，那么无论您是否使用

transclude:element

，外部div的内部html都不会被清除。如果我错了，请告诉我。谢谢：）是的，哦，我在想一个更复杂和不同的场景，我刚才看到的。就你的情况而言，你是对的。

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