0

我有以下代码不会产生预期的结果：

<div class="outer">1<div>content</div></div>
<div class="outer">2<div>content</div></div>
<div class="outer">3<div>content</div></div>
<div class="outer">4<div>content</div></div>

结果是：

<div class="outer">1</div>
<div class="outer">2</div>
<div class="outer">3</div>
<div class="outer">4<div>content</div></div>

似乎 ng-repeat 先完成，最后一个项目处理嵌入。我知道 ng-repeat 在编译阶段创建节点，但我认为在链接阶段会为每个节点调用链接函数并添加嵌入的内容。

有人可以解释这里发生了什么以及如何正确地做到这一点吗？

<!DOCTYPE html>
<html ng-app="Transclude">
<head lang="de">
  <meta charset="UTF-8">
  <title>Transclude</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>

  <outer ng-repeat="counter in [1,2,3,4]" value="counter">
    <div>content</div>
  </outer>

<script>
  angular.module('Transclude', [])

    .directive('outer', function () {
      return {
        restrict: 'E',
        scope: {
          value: '='
        },
        replace: true,
        transclude: true,
        template: '<div class="outer">{{value}}</div>',

        link: function(scope, element, attributes, controller, transclude) {
          var transcludedContent = transclude();
          element.append( transcludedContent );
        }
      };
    })

</script>

</body>
</html>
4

1 回答 1

1

transclude() 本身只是将指令的内容链接到适当的范围并返回它。你想要做的实际上是在嵌入链接之前克隆内容（复制它）。正如您现在的代码所代表的那样，您的嵌入内容只是从一个实例移动到另一个实例 - 最终出现在最后一个实例上，因为它是最后一个实例。

您可以使用 cloneAttachFn 执行此操作。您将其传递给嵌入。

    link: function(scope, element, attributes, controller, transclude) {
      transclude(scope, function(clone) {
          element.append( clone );
      });

    }
于 2015-02-15T08:42:24.893 回答