如何在角度工作中进行嵌套嵌入

How to make nested transclusion in angular work?

本文关键字：嵌套 工作中      更新时间：2023-09-26

我无法使嵌套嵌入工作。

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

这是这个小提琴，它证明了我的问题。

这是代码：

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

你应该在内部指令中ng-transculde，因为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>'
        };
});

无需更改内部指令。

我在这里更新了小提琴

执行此操作的另一种方法（在自包含组件中很有用）显示在此 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>'
     };
 });

这会将 dom 树的transclude: true传递到内部指令。

这样做的缺点是不能单独使用，并且在 jsfiddle 中它抛出一个 ngTransclude：孤儿指令错误

因此，我要求inner指令是outer指令的子指令，这样它将始终将隐含传递给它。

将大指令分解为小指令真的很好。

相关文章：