angularjs - 如何绑定(bind)到元素高度并在窗口调整大小或使用 Angular 的其他事件时观察它？

Question

我有两个元素 .common 和 .userpanel
1. 我需要在加载时给普通 div 的 .userpanel 高度
2. 继续绑定(bind)窗口调整大小事件
3. 继续绑定(bind)另一个事件(比如我增加了普通div的高度，当我运行函数展开子元素时)

Answer 1

该指令可以帮助绑定(bind)元素之间的高度，演示可在
https://plnkr.co/edit/hpIlWxP2DbtGgVGdrcbk?p=preview

app.directive('bindTo', function($document, $window) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {

      if(!attr.bindTo) {
        console.log('bindTo element not defined');
        return;
      }

      var windowElm = angular.element($window), 
        bindToElm = angular.element($document[0].querySelector(attr.bindTo));

      if(!bindToElm) {
        console.log('defined bindTo element ', attr.bindTo, ' not found');
        return;
      }

      windowElm.on('resize', bindHeight);
      scope.on('someEvent', bindHeight);

      bindHeight();

      function bindHeight() {
        var bindToElmHt = bindToElm.height();
        element.css('height', bindToElmHt);
      }
    }
  }; 
});

用法就像，

<div class="common">
  Common
</div>
<div class="user-panel" bind-to=".common">
  User Panel
</div>