Question

我在使用ng-bind填充的DIV中有一些内容，我想根据DIV的高度做一些计算。我目前正在使用指令这样做。但是，指令的DOM选择器总是以DIV的初始高度结束（没有填充任何内容）。

那么，如何/何时可以在人口之后获得DIV的实际高度？

以下是相关代码：

<div class="main-header" fit-screen>
  <img class="full-height" ng-src="{{ data.images.cover.image_url }}" alt="{{ data.description.name }}" />
</div>
<div class="product-basic-info-container">
  <!--all content populated using ng-bind-->
  <h1 class="product-name" ng-bind="data.description.name"></h1>
  <h2 class="product-desc" ng-bind="data.description.summary"></h2>
  <div class="product-price clearfix">
    <span class="price now-price" ng-bind="'¥' + data.prices.price"></span>
    <a ng-href="{{ data.buy_url }}" class="form-button buy-button">Buy</a>
  </div>
</div>


var fitScreenDir = function() {
  return {
    link : function() {
      /* Fit both header and basic info into one page */
      var viewport_height = document.documentElement.clientHeight;
      var header_elem = document.querySelector( '.main-header' );
      var product_info_elem = document.querySelector( '.product-basic-info-container' );
      var product_info_height, result_height, original_height, new_css;

      /* Get basic info height and substract from viewport height */
      product_info_height = product_info_elem.offsetHeight;
      result_height = ( viewport_height - product_info_height );

      /* Set new height */
      new_css = {
        'height'          : result_height + 'px'
      };
      angular.element( header_elem ).css( new_css );
    }
  };
};

app.directive( 'fitScreen', fitScreenDir );

Answer 1

我猜你正在尝试检索指令的link函数体内的高度。这将在您的div填充任何绑定之前。

您可以在示波器上设置监视并在值发生变化时执行函数（请在此处阅读https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope）。 bindedProperty需要在您的指令范围内可用。

scope.$watch('bindedProperty', function(newValue, oldValue) {
  if (newValue === oldValue) return;

  // el.height();
})

何时获得高度角度填充的div

1 个答案: