如何使用Angular绑定元素高度并在window resize或其他事件中观察它呢?

Question

我有两个元素。common和。userpanel1. 我需要给。userpanel的共同div在负载上的高度2. 保持对窗口大小调整事件的绑定3.保持对另一个事件的绑定(例如，当我运行扩展子元素的函数时，我增加了普通div的高度)

Answer 1

这个指令可以帮助在元素之间绑定高度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>

Answer 2

有许多javascript库可以检测element's dimensions的变化。

其中之一是:detect-element-resize

你可以使用它来检测变化，然后使用回调来重新分配高度变化

Answer 3

技巧是使用$watch()创建一个超过所需元素高度的监视器。您可以在这里找到它的文档。然后你需要绑定一个函数到$window上的resize事件。

差不多了。您可以在下面查看一个工作示例。注意元素的高度是如何作为一个scope属性公开的。

angular
  .module('myApp', [])
  .directive('getHeight', function() {
    return {
      controller: ['$attrs', '$element', '$scope', '$window',
        function($attrs, $element, $scope, $window) {
          ///////////////
          // Variables //
          ///////////////
          // Used to create a debounced function
          var resizeTimeout;
          var scopeVariableName = $attrs.getHeight;
          ///////////////
          // Run block //
          ///////////////
          angular.element($window).bind('resize', onResize);
          $scope.$on('$destroy', function() {
            angular.element($window).unbind('resize', onResize);
          });
          $scope.$watch(getElementHeight, function(newValue) {
            $scope[scopeVariableName] = newValue;
          });
          ///////////////
          // Functions //
          ///////////////
          function getElementHeight() {
            return $element[0].clientHeight;
          }
          function onResize() {
            // setTimeout is used rather than $timeout as this doesn't trigger
            // a new digest cycle. we trigger a digest cycle only if needed.
            clearTimeout(resizeTimeout);
            resizeTimeout = setTimeout(function() {
              var elementHeight = getElementHeight();
              if ($scope[scopeVariableName] === elementHeight) {
                // The 2 values are identical. There's no need for a digest cycle
              } else {
                $scope.$evalAsync(function() {
                  $scope[scopeVariableName] = elementHeight;
                });
              }
            }, 50);
          }
        }
      ],
      scope: false,
      restrict: 'A'
    }
  });

html,
body {
  height: 100%;
  margin: 0;
}
body {
  padding: 50px;
}
.common-style {
  color: #ffffff;
  font-family: sans-serif;
  font-size: 30px;
  width: 30%;
}
#parent {
  background: blue;
  margin: 2.5% 0;
  height: 30%;
}
#child {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="myApp" style="height: 100%;">
  <label>Custom parent height:</label>
  <input type="number" ng-model="explicitParentHeight">
  <div>If nothing is written here, then the blue div will have a height of 30%</div>
  <div id="parent" class="common-style" get-height="parentHeight" ng-style="{height: explicitParentHeight + 'px'}">PARENT</div>
  <div id="child" class="common-style" ng-style="{height: parentHeight + 'px'}">CHILD - height: {{ parentHeight }}</div>
</div>