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');