Question

我有一个Map组件，它具有静态位置并且位于其他一些东西之上（不要介意）。
我有一个侧边栏组件，它在其他东西中具有自己的相对位置＆＃39;。

我需要的是根据屏幕上的侧边栏位置设置我的地图组件的固定位置，并观察侧边栏位置或窗口大小调整的任何更改。

我怎么能实现这个目标？

Answer 1

用法：

<div id="map" fixed top-left="$ctrl.topLeft()" bottom-right="$ctrl.bottomRight()">map</div>

实施：

var app = angular.module('app')

app.directive('fixed', [ '$window', function($window) {
    function position(scope, element) {
        var topLeft = scope.topLeft();
        var bottomRight = scope.bottomRight();
        element.css({
            position: 'fixed',
            left: topLeft.x - (element.outerWidth(true) - element.outerWidth()) / 2,
            top: topLeft.y - (element.outerHeight(true) - element.outerHeight()) / 2,
            width: bottomRight.x - topLeft.x - (element.outerWidth(true) - element.innerWidth()),
            height: bottomRight.y - topLeft.y - (element.outerHeight(true) - element.innerHeight())
        });
    }

    return {
        scope : {
            topLeft: '&',
            bottomRight: '&'
        },
        link : function(scope, element, attr) {
            position(scope, element);
            $($window).resize(function() {
                position(scope, element);
            });
        }
    };
}]);

根据其他组件的大小和位置固定组件位置

1 个答案: