user3501613 user3501613 - 1 month ago 9
AngularJS Question

set height of child div in AngularJS

I am new to angularJS and trying to find height of child div from parent div.I want to do it without jquery. I tried lot of solution from here but non of them working for me.

I have one more doubt, in jquery we can use $(".class").height() and $(".class").css("value"), like this angularJS provides any option to set the properties to parent and child div.

here i am using directive concept to set these things,

Code

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

I'm not Angular guy but try this

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

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].clientHeight;
              //Uncaught TypeError: element.children(...)[0].height is not a function(…) 

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


        }
    }
});

css() and height() are stuff from jQuery.

For height() you could use clientHeight - it would include and padding, for css you could go with style.height.

Comments