AngularJS:如何获得元素高度

时间:2016-04-21 11:07:04

标签: html angularjs

如果他的身高超过300px,我试图找到一个元素的高度并为其添加一个类。 我知道这个问题有一些答案,但我不知道自己做错了什么..

如果textheight > 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>

3 个答案:

答案 0 :(得分:0)

如果您不想使用angular或jquery并且只想使用CSS,那么这个解决方案应该可行 -

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

请参阅此fiddle

答案 1 :(得分:0)

elem.height()不是函数,因此您可以使用scrollHeight属性。

检查以下小提琴。

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

答案 2 :(得分:0)

添加max-height:300px;和溢出-y:滚动;属性为CSS并在if条件下使用下面的代码。

elem.addClass('text');