css - 在 AngularJS 中调整元素高度

Question

我正在使用 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');
    }
  }
};
});

Answer 1

我用 nativeJS 和 angularJS 和原生 JS 给你举了个例子。只需检查 Elements clientHeight 和 scrollHeight 属性即可使其正常工作。

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; }