transclude（）和ng-repeat打得不好

Question

尝试使用transclude()从指令中转换包含ng-repeat语句的HTML部分，这非常糟糕。它不是一次重复所有元素，而是重复它们一次，然后再次重复，然后重复一次，重复一次，通常大约17次。

我烦恼地必须使用这种相当黑客的方式来获取内容以进行转换，因为我无法使用普通模板指令并且还使用angular-ui-bootstrap $ modal函数，这需要模板来直接添加到它。

在我将内容注入页面之前，我已将问题范围缩小到了，因为在getBody()函数中放置一个断点并在控制台中键入transclude()会显示额外的内容重复已经发生了。

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

对于出现问题或如何解决问题的任何建议表示赞赏。

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

主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]);
                }
            }


        }
    };
};

模态模板：

<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：http://plnkr.co/edit/8DD1rgTYOLYHAtsLdm9s?p=preview

Answer 1

我认为问题在于你多次调用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]);
            }
        }
    };
});

或者这更好：

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

通常，你不应该在指令元素之外追加由指令创建的DOM，所以我将附加到指令元素中。