angularjs transclude 和 ng-repeat：做对了

Question

我的以下代码未产生预期结果：

<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 在编译阶段创建节点，但我认为在 link 阶段为每个节点调用 link 函数并添加嵌入的内容。

有人可以解释这里发生了什么以及如何正确处理吗？

<!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>

Answer 1

transclude() 本身只是将指令的内容链接到适当的范围和 returns 它。您要做的实际上是在嵌入链接之前克隆内容（制作副本）。当您现在编写代码时，您的嵌入内容只是从一个实例移动到另一个实例 - 结束于最后一个，因为它是最后一个。

您可以使用 cloneAttachFn 执行此操作。你将它传递给 transclude。

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

    }

angularjs transclude 和 ng-repeat：做对了

angularjs transclude and ng-repeat: doing it right

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-transclude