Javascript transclude（）和ng重复播放效果不好

使用

transclude（）

尝试从指令中转义包含ng repeat语句的HTML部分会严重中断。它不是将所有元素都重复一次，而是将所有元素重复一次，然后再重复，然后再重复，重复次数可变，通常为17次左右

令人恼火的是，我不得不使用这种相当老套的方式来获取要转换的内容，因为我不能使用普通的模板指令，也不能使用angular ui bootstrap$modal函数，这需要将模板直接添加到模板中

在将内容注入页面之前，我已经将问题缩小到了，因为在

getBody（）

函数中放置一个断点并在控制台中键入

transclude（）

表明额外的重复已经发生

我知道问题不在于ng repeat，因为我可以将指令调用中的内容复制到主HTML中，并将其直接放在它之后，repeat工作正常

任何关于出现问题或如何解决问题的建议都将不胜感激

下面是我用来演示的代码的简化版本：

HTML主页面：

<div data-wp-modal="{{'registration.registeredAddresses.allAddressesHead' | translate}} {{entity.type}}"
         data-show="controller.viewModel.openOrganisationAddressModal">
        <table class="table" data-table-name="registeredAddresses">
            <tbody>
                <tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']">
                    <td>{{animal}}</td>
                </tr>
            </tbody>
        </table>
    </div>

{{动物}}

指令：

// @ngInject
exports.wpModal = function(lpCoreBus, lpCoreUtils, lpWidget, $compile, $modal, $modalStack) {

    return {
        restrict: 'EA',
        replace: true,
        scope: {
            show: "=",
        },
        transclude: true,
        link: function (scope, element, attr, ctrl, transclude) {

            scope.$watch("show", function(newValue, oldValue) {
                if (newValue && newValue !== oldValue) {
                    var modalInstance = $modal.open({
                        "animation": true,
                         "scope": scope,
                         "controller": "ModalController",
                         "templateUrl": lpCoreUtils.resolvePortalPlaceholders("$(contextPath)/static/launchpad/modules/module-wp-modal/templates/modal.html"),
                         "size": "md"

                    });

                    modalInstance.result.then(function () {
                        // User confirmed the action [performed after doConfirm()]
                        scope.buttonConfirmAction();

                    }, function () {
                        // User cancelled the action [performed after doCancel()]
                        scope.buttonCancelAction();
                    });

                    scope.show = false;
                }

            });

            scope.getBody = function() {

                for (var i = 0; i < transclude().length; i++) {
                    console.log(transclude()[i]);
                    document.querySelector(".modal-body").appendChild(transclude()[i]);
                }
            }


        }
    };
};

/@ngInject
exports.wpModal=函数（lpCoreBus、lpCoreUtils、lpWidget、$compile、$modal、$modalStack）{
返回{
限制：“EA”，
替换：正确，
范围：{
显示：“=”，
},
是的，
链接：函数（范围、元素、属性、ctrl、transclude）{
范围.$watch（“显示”），函数（newValue，oldValue）{
if（newValue&&newValue！==oldValue）{
var modalInstance=$modal.open({
“动画”：没错，
“范围”：范围，
“控制器”：“ModalController”，
“templateUrl”：lpCoreUtils.resolvetportalplaceholders（$（contextPath）/static/launchpad/modules/module wp modal/templates/modal.html”），
“大小”：“md”
});
modalInstance.result.then（函数（）{
//用户确认了操作[在doConfirm（）之后执行]
scope.buttonconfirmation（）；
}，函数（）{
//用户取消了操作[在doCancel（）之后执行]
作用域。按钮取消激活（）；
});
scope.show=false；
}
});
scope.getBody=函数（）{
for（var i=0；i

模态模板：

<div data-ng-init="getBody()">

    <div class="modal-body">
    </div>


</div>

输出：

<div class="modal-body">
    <table class="table ng-scope" data-table-name="registeredAddresses">
        <tbody>
            <!-- ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">cat</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">dog</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">bird</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] --><tr data-ng-repeat="animal in ['cat', 'dog', 'bird', 'turtle']" class="ng-scope">
                <td class="ng-binding">turtle</td>
            </tr><!-- end ngRepeat: animal in ['cat', 'dog', 'bird', 'turtle'] -->
        </tbody>
    </table>
</div>

猫
狗
鸟
乌龟
猫
狗
鸟
乌龟
猫
狗
鸟
乌龟
猫
狗
鸟
乌龟
猫
狗
鸟
乌龟
猫
狗
鸟
乌龟
猫
狗
鸟
乌龟
猫
狗
鸟
乌龟
猫
狗
鸟
乌龟
猫
狗
鸟
乌龟

---

Plunker:

我想问题在于您多次调用了

transclude（）

，它多次链接相同的DOM元素。要了解这一点，您可以在

ngRepeatLink

函数中设置断点

return function ngRepeatLink($scope, $element, $attr, ctrl, $transclude) {

在angular.js源代码中。为了避免这种情况，您可以使用以下代码：

app.directive('test', function() {
    return {
        transclude: true,
        scope: {
          show: '='
        },
        link: function(scope, element, attr, ctrl, transclude) {
            var linked = transclude();
            for (var i = 0; i < linked.length; i++) {
              element.append(linked[i]);
            }
        }
    };
});

---

一般来说，您不应该在directive元素之外附加directive创建的DOM，所以我将其附加到directive元素中。

这是angular2代码吗？不，Angular1.2.29这是什么呢。我只知道它是有效的，我复制的其他12个左右的模块（ie指令）在项目中使用该语法作为该指令的基础。这绝对不是问题所在，因为使用此语法的其他指令不会受到任何不利影响。您是否可以使用可复制的行为设置

plunker

？感谢这一点，但问题是，我必须将内容放置在指令元素之外，因为它的内容将添加到模式中，通过Angular UI Bootstrap将其作为body的直接子级注入，并且在调用bootstraps函数之前，无法在该模式中声明内容，该模式甚至不存在。是否可以在不使用额外模板的情况下执行此操作，而本指令正是为了避免使用额外模板？当然，只需像您所做的那样，不要多次调用transclude（），只需调用一次即可，正如我所展示的，非常感谢您的帮助！

app.directive('test', function() {
    return {
        transclude: true,
        scope: {
          show: '='
        },
        link: function(scope, element, attr, ctrl, transclude) {
            var linked = transclude();
            element.append(linked);
        }
    };
});