如何将多槽转换范围设置为指令范围？

Question

I'm trying to build the multi-slot directive that may be used recursively.

THE PROBLEM is how to set the transclude scope to the directive scope of each transclude slot.

In the directive template I use construct like this:

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

NOW the standard setting of transclude scope as calling the transclude in link function:

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

stopped working.

Let the directive template be:

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

Answer 1

provide slot name arg

when using slots, you have to specify what your interested in.

The transclude function signature looks like this:

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

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