我有以下代码无法产生预期的结果：
<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首先完成，最后一项处理transclude。我知道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>
最佳答案
transclude（）本身仅将指令的内容链接到适当的范围并返回它。您真正想要做的是在链接内容之前克隆内容（制作内容副本）。正如您现在编写的代码一样，您所包含的内容只是从一个实例移至另一个实例-最终出现在最后一个实例上，因为它是最后一个实例。
您可以使用cloneAttachFn执行此操作。您将其传递以进行超越。
link: function(scope, element, attributes, controller, transclude) {
transclude(scope, function(clone) {
element.append( clone );
});
}
关于javascript - angularjs transclude和ng-repeat:正确执行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28524244/