Question

所以，我在角度中使用transclude这段代码。

angular.module('playground', []).directive('tagA', function() {
        return {
            replace: true,
            transclude: true,
            controller: function() {
                console.log('controller tagA')
            },
            compile: function($element, $attrs, $link) {
                console.log('compile tagA', $element.html());
                return {
                    pre: function($scope, $element, $attrs, controller, $transclude) {
                        console.log('pre tagA', $element.html());
                    },
                    post: function($scope, $element, $attrs, controller, $transclude) {
                        console.log('post tagA', $element.html());
                    }
                }
            },
            template: '<u><tag-b><div ng-transclude></div></tag-b></u>'
        }
    }).directive('tagB', function() {
        return {
            require: '^tagA',
            transclude: true,
            controller: function() {
                console.log('controller tagB')
            },
            compile: function($element, $attrs, $transclude) {
                console.log('compile tagB', $element.html());
                return {
                    pre: function($scope, $element, $attrs, controller, $transclude) {
                        console.log('pre tagB', $element.html());
                    },
                    post: function($scope, $element, $attrs, controller, $transclude) {
                        console.log('post tagB', $element.html());
                    }
                }
            },
            template: '<h1 ng-transclude></h1>'
        }
    });

标记

<tag-a>
    Test
</tag-a>

我要做的是将被转换的内容从父（tagA）传递给子（tagB）。上面的代码有效，但我不想在<div ng-transclude></div>的模板中使用tagA。显然，使用<u><tag-b ng-transclude></tag-b></u>不起作用。

有人可以解释为什么后期（<u><tag-b ng-transclude></tag-b></u>）不起作用吗？

Answer 1

后一种形式不起作用，因为transclude会替换放置ng-transclude的元素的内部HTML。

首先，（工作中你有类似的东西）：

<tag-a>
  <u>
    <tag-b>
      <div ng-transclude>
        <h1 ng-transclude>
          Test
        </h1>  
      </div>
    </tag-b>
  </u>
</tag-a>

由于内部html被替换，你最终得到的是：

<u>
  <div>
    <h1>
      Test
    </h1>
  <div>
</u>

在第二个例子中，你有：

<tag-a>
  <u>
    <tag-b ng-transclude>
      <h1 ng-transclude>
        Test
      </h1>
    </tag-b>
  </u>
</tag-a>

再次，删除指令并替换内部html，您得到：

<u>
</u>

在Angular中嵌套的ng-transclude

1 个答案: