如何将多槽transclude作用域设置为指令作用域

How to set the multi-slot transclude scope to directive scope?

本文关键字：作用域设置指令 transclude 更新时间：2023-09-26

我正在尝试构建可以递归使用的多槽指令。

问题是如何将transclude作用域设置为每个transclude插槽的指令作用域

在指令模板中，我使用这样的结构：

<div>
  <div ng-tranclude="slot1"></div>
  <div ng-tranclude="slot2"></div>
</div>

现在transclude作用域的标准设置为调用链接函数中的transclude：

transclude(scope, function(clone, scope) {
        element.append(clone);
      });

停止工作。

让指令模板为：

    .directive("verticalSplitter", ['$log', function ($log) {
    return {
        restrict: 'E',
        scope: {
            width: '=',
            height: '=',
            split: '=',
            minLeft: '=',
            minRight: '='
        },
        transclude: {
            leftPane: 'leftPane',
            rightPane: 'rightPane'
        },
        template: '<div style="position:relative; width:{{width}}px; height:{{height}}px;">'
            + '<div style="width:{{splitPosition - 4}}px; height:{{height}}px; position:relative; border: 1px solid black; margin-right: 4px; padding: 4px 4px 4px 4px; display:inline-block;">'
            + '<div style="display:block; overflow:hidden; width:{{splitPosition -12}}px; height:{{height-10}}px; vertical-position:top;" ng-transclude="leftPane"></div>'
            + '</div>'
            + '<div style="position:absolute; left:5px; top:0px; width:{{wsplitPosition -10}}px; bottom:0px; background-color:darkgreen; opacity:0.5; z-index:10000;" ng-show="isMouseDown"></div>'
            + '<div style="position:absolute; left:{{wsplitPosition -2}}px; top:0px; width:4px; bottom:0px; background-color:{{resizeBarColor}}; z-index:10000; cursor:col-resize;" ng-mousedown="resizeMouseDown($event)"></div>'
            + '<div style="position:absolute; left:{{wsplitPosition + 4}}px; top:0px; width:{{width - wsplitPosition -16}}px; bottom:0px; background-color:darkred; opacity:0.5; z-index:10000;" ng-show="isMouseDown"></div>'
            + '<div style="width:{{width - splitPosition - 8}}px; height:{{height}}px; position:relative; border: 1px solid black; margin-right: 4px; padding: 4px 4px 4px 4px; display:inline-block;">'
            + '<div style="display:block; overflow:hidden; vertical-position:top; width:{{width - splitPosition - 16}}px; height:{{height - 10}}px;" **ng-transclude="rightPane"**></div>'
            + '</div>'
            + '</div>',
        link: function (scope, element, attrs, controller, transcludeFn) {
            scope.splitPosition = scope.split;
            scope.wsplitPosition = scope.splitPosition;
            scope.resizeBarColor = "transparent";
            var startX = 0;
            scope.isMouseDown = false;
            var updateRL = function () {
                scope.widthL = scope.splitPosition - 12;
                scope.heightL = scope.height - 10;
                scope.widthR = scope.width - scope.splitPosition - 16;
                scope.heightR = scope.height - 10;
            };
            updateRL();
            scope.resizeMouseDown = function ($event) {
                scope.isMouseDown = true;
                scope.resizeBarColor = "dimgray";
                startX = $event.screenX;
                $(window).on("mousemove", function (event) {
                    scope.doResize(event);
                    scope.$apply();
                    return false;
                });
                $(window).on("mouseup", function (event) {
                    $(window).off("mouseup");
                    $(window).off("mousemove");
                    scope.resizeMouseUp(event);
                    scope.$apply();
                    return false;
                });
            };
            scope.resizeMouseUp = function ($event) {
                scope.splitPosition = scope.wsplitPosition;
                updateRL();
                scope.resizeBarColor = "transparent";
                scope.isMouseDown = false;
            };
            scope.doResize = function ($event) {
                if (!scope.isMouseDown)
                    return;
                var ev = $event;
                var moveX = (startX - $event.screenX);
                if (scope.wsplitPosition - moveX > scope.minLeft && (scope.wsplitPosition - moveX) < scope.width - scope.minRight) {
                    scope.wsplitPosition -= (startX - $event.screenX);
                    startX = $event.screenX;
                }
                return false;
            };
        }
    };
}])

提供插槽名称arg

使用插槽时，您必须指定您感兴趣的内容。

transclude函数签名如下：

transclude([scope], cloneLinkingFn, futureParentElement, slotName)

transclude(scope, function(clone, scope) {
    element.append(clone);
}, false, 'slot1');