AngularJS：如何獲取元素高度

Question

我試圖找到一個元素的高度，並添加一個類，如果他的身高大於300px。 我知道，這個問題有一定的答案，但我不知道我做錯了什麼..

我的目標是增加一個溢出滾動條，如果text有height > 300px

JSFIDDLE

這是什麼我這樣做的遠：

var myApp = angular.module('myApp', []); 
myApp.directive('overflow', function() { 
    return { 
     restrict: 'A', 
     link: function (scope, elem, attrs) { 

      var height = elem.height(); 
      if(height>100) { 
       elem.addClass('overflow'); 
      } 
      else { 
       elem.removeClass('overflow'); 
      } 
     } 
    }; 
}) 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="myApp"> 
    <div overflow class="text"> 
    <p> 
     long text long text long textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong textlong text 
    </p> 
    </div> 
</div> 

Answer 1

elem.height()不是一個函數，所以你可以使用scrollHeight屬性屬性。

檢查下面的小提琴。

https://jsfiddle.net/alpeshprajapati/U3pVM/24274/

Answer 2

如果萬一你不想使用的角度或jQuery和只是想利用CSS那麼這個解決方案應該工作 -

.text p { 
    max-width:300px; 
    max-height:100px; 
    overflow:auto; 
} 

請參閱本fiddle

Answer 3

附加最大高度：300像素;和overflow-y：scroll;屬性到CSS並在if條件中使用下面的代碼。

elem.addClass('text');