基於其他組件的大小和位置的固定組件位置

Question

我有一個具有靜態位置並位於其他某些東西（不介意）的地圖組件。
我有一個側欄組件，它有自己的'其他東西'內的相對位置。

我需要的是根據屏幕上的側欄位置設置我的地圖組件的固定位置，並觀察側欄位置或窗口大小的任何更改。

我怎麼能做到這一點？

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