在AngularJS中调整元素高度

时间:2015-05-08 14:35:32

标签: css angularjs html5

我正在使用AngularJS(非常新)。我遇到了一个挑战,如果textarea值很大我必须使它可以滚动以及它周围的边框,如果不是我必须删除边框和滚动。我尝试添加指令,但无法使其工作。

如果有任何相关工作,请告诉我。感谢您的时间和帮助。

更新:

angular.module('myApp')
.directive('removeBorder', function () {
return {
  restrict: 'A',
  link: function (scope, element, attrs) {
    if (element[0].clientHeight < element[0].scrollHeight) {
      console.log(element.clientHeight);
      console.log(element.scrollHeight);
      console.log('ELEMENT: ' + element[0]);
      angular.element(element[0]).removeClass('scroll');
    }
  }
};
});

1 个答案:

答案 0 :(得分:0)

我用nativeJS和angularJS用原生JS做了一个例子。只需检查元素clientHeightscrollHeight属性即可使其生效。

angularJS指令

angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {}])
.directive('removeBorder', function() {

  return { 
    restrict: 'A', 
    link: function (scope, element, attrs) {
      if (element[0].clientHeight >= element[0].scrollHeight) { 
        console.log(element[0].clientHeight); 
        console.log(element[0].scrollHeight);  
        angular.element(element[0]).addClass('no-scroll'); 

      }
    }}; 
});

原生JS - Plunker

function hasScrollbar(elemId) { 
    elem = document.getElementById(elemId); 
    if (elem.clientHeight < elem.scrollHeight) {
        alert("The element #" + elemId + " has a vertical scrollbar!"); 
    } else {
        alert("The element #" + elemId + " doesn't have a vertical scrollbar."); 
        elem.style.border= "0";
    }
}

可滚动的自动设置。或者使用css:

    textarea { overflow-y:scroll; }