Question

我是angularJS的新手并试图从父div中找到子div的高度。我想在没有jquery的情况下这样做。我从这里尝试了很多解决方案，但没有为我工作。

我还有一个疑问，在jquery中我们可以使用$（＆＃34; .class＆＃34;）。height（）和$（＆＃34; .class＆＃34;）。css（＆＃34; value＆＃34;），像这样angularJS提供了将属性设置为父子div的任何选项。

这里我使用指令概念来设置这些东西，

代码

myApp.directive('orientable', function () {       
return {
    restrict: 'A',
    link: function(scope, element, attrs, controller) {

          //this both will work fine
           alert(element.children()[0].offsetHeight);
           alert(element.children()[1].offsetHeight);

           debugger;

           element.children()[0].height();
          //Uncaught TypeError: element.children(...)[0].height is not a function(…) 

           //this bellow code is showing the error
           element.children()[0].css('height','250px');
       //Uncaught TypeError: element.children(...)[0].css is not a function(…) 


    }
}
});

 <div orientable class=main ng-app="myApp">
    <div class=ele1> </div>
     <div class=ele2> </div>
      <div class=ele3> </div>
</div>

Fiddile

Answer 1

使用element.children()[0].height();您正在使用jquery，因为是典型的jquery函数。

将其替换为element.children()[0].clientHeight，你应该好好去。请记住，javascript提供了各种函数来获取元素高度：

clientHeight包括元素的高度和垂直填充。

offsetHeight包括元素的高度，垂直边距和垂直边框。

Answer 2

访问像element.children()[0]这样的元素时，您可以访问原始DOM元素，该元素不具有来自jquery的css / height方法。

您可以这样设置身高element.children()[0].style.height = "200px"

Answer 3

我不是Angular家伙，但试试这个

var myApp = angular.module('myApp', []);

myApp.directive('orientable', function () {       
    return {
        restrict: 'A',
        link: function(scope, element, attrs, controller) {

               alert(element.children()[0].offsetHeight);
               alert(element.children()[1].offsetHeight);

               element.children()[0].clientHeight;
               element.children()[0].style.height="250px";


        }
    }
});

css()和height()是来自jQuery的东西。

对于height（），您可以使用clientHeight - 它将包含和填充，对于css，您可以使用style.height。

在AngularJS中设置子div的高度

3 个答案: