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

我有一个地图组件，它有一个静态的位置，并且放在其他东西的上面（不要介意）。
我有一个边栏组件，它在“其他东西”中有自己的相对位置

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

我如何才能做到这一点？

用法：

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