Question

我正在尝试创建一个新指令，该指令需要获取元素的内部HTML并使用transclusion将其放置在两个不同位置的模板中。尝试使用翻译功能两次，或者使用一次并将克隆的内容附加两次时，我遇到了错误，如下面的代码所示：

.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
        }
    };
});

角度指令 - 两次转录相同的内容

1 个答案: