他のコンポーネントのサイズと位置に基づいて固定コンポーネントの位置

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