angularjs – 如何使用Angular绑定到元素高度并在窗口大小调整或其他事件上进行调整？

2023年6月28日 127次阅读

我有两个元素.common和.userpanel

 1.我需要在加载时给出公共div的.userpanel高度

 2.继续绑定窗口大小调整事件

 3.继续绑定另一个事件(例如,当我运行扩展子元素的函数时,我增加了公共div的高度) 最佳答案 该指令可以帮助绑定元素之间的高度,演示可用于

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>
点赞