javascript - Angular 指令 - 两次包含相同内容

Question

我正在尝试创建一个新指令，该指令需要获取元素的内部 HTML 并使用嵌入将其放入模板中的两个不同位置。当我尝试使用嵌入函数两次，或者使用一次并附加克隆的内容两次时，我遇到了错误，正如您在下面的代码中看到的那样:

.directive('toolbar', function () {

    return {

        restrict: 'E',
        scope: {},
        transclude: true,
        template:   '<toolbar-main><div transclude-main></div></toolbar-main>' + 
                    '<toolbar-overflow><div transclude-overflow></div></toolbar-overflow>',
        link: function (scope, element, attrs, controller, transclude) {

            transclude(function (clone) {
                 element.find('[transclude-main]').replaceWith(clone);
                 element.find('[transclude-overflow]').replaceWith(clone);
            });

        }


    };


});

是否有可能做我想做的事情？

Answer 1

如果您想拥有两个副本，则需要附加 clone 的克隆版本，否则第二个 replaceWith 只会移动 clone 元素从之前的位置到新的位置:

.directive('toolbar', function() {
    return {
        restrict: 'E',
        scope: {},
        transclude: true,
        template: 
            '<toolbar-main><div ng-transclude></div></toolbar-main>' +
            '<toolbar-overflow><div ng-transclude></div></toolbar-overflow>',
        link: function(scope, element, attrs, controller, transclude) {
            // nothing here
        }
    };
});