CODEWITHSUNDEEP
javascripthtmlcssangularjs
user3501613
user3501613

Reputation: 610

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

Upvotes: 0

Views: 1447

Answers (3)

Belmin Bedak
Belmin Bedak

Reputation: 9201

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) {

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

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


        }
    }
});

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.

Upvotes: 1

GillesC
GillesC

Reputation: 10874

When you access an element like element.children()[0] you access the raw DOM element which doesn't have css/height methods as those come from jquery.

You could set the height this way instead element.children()[0].style.height = "200px"

Upvotes: 1

illeb
illeb

Reputation: 2947

With element.children()[0].height(); you are using jquery, because height() is a typical jquery function.

Replace it with element.children()[0].clientHeight and you should be good to go. Remember that javascript provides various functions to get a element height:

clientHeight includes the height and the vertical padding of your element.

offsetHeight includes the height, the vertical padding and vertical borders of your element.

Upvotes: 1

Related Questions