Get height of div in angularjs

Question

I have 3 div in which the data is filling from controller. and the div is dependent on dropdown select (particular div will be shown for particular dropdown value). the problem is that I am unable to get the height of that div when page is loaded and also when I changed the dropdown value. Everytime I am getting 0 height.

here is the code for html:

 <div class="brand-categoryWrp">
          <select ng-model="allbrandscategory" ng-change="catChange(allbrandscategory)">
              <option value="all">AllBrands</option>
              <option value="watches">Watches</option>
              <option value="pens">Pens</option>
          </select>
      </div>

   <div ng-show="firstdiv" allbrands-directive>
      <ul>
        <li ng-repeat="res in brands">
          {{res.name}}
        </li>
      </ul> 
    </div>
    <div ng-show="seconddiv" watches-directive>
      <ul>
       <li ng-repeat="res in brands1">
          {{res.name}}
        </li>
      </ul> 
    </div>
    <div ng-show="thirddiv" pens-directive>
      <ul>
        <li ng-repeat="res in brands2">
          {{res.name}}
        </li>
      </ul> 
    </div>

and here is for controller:

// Code goes here

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

myapp.controller('mycntrl',function($scope){


 $scope.allbrandscategory = 'all';
 $scope.firstdiv = true;

 $scope.brands = [
   {name: 'Adidas'},
   {name: 'Armani'}
 ];

  $scope.brands1 = [
    {name: 'Adidas1'},
    {name: 'Armani1'},
    {name: 'Fossil'}
];

  $scope.brands2 = [
    {name: 'Adidas2'},
    {name: 'Armani2'},
    {name: 'Mont blanc'},
    {name: 'calvin'}

];

  $scope.catChange = function(val){

   $scope.firstdiv = false;
   $scope.seconddiv = false;
   $scope.thirddiv = false;
   if(val == 'all')
   {
     $scope.firstdiv = true;
   }
   else if(val == 'watches')
   {
     $scope.seconddiv = true;
   }
   else if(val == 'pens')
   {
       $scope.thirddiv = true;
   }
 };

});

myapp.directive('pensDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
        //console.log(element);
        console.log("pens: "+element[0].offsetHeight);
       }
   };
 });
  myapp.directive('watchesDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
       // console.log(element);
        console.log('watches: '+element[0].offsetHeight);
       }
    };
  });
  myapp.directive('allbrandsDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
        //console.log(element);
        console.log("brand: "+element[0].offsetHeight);
       }
   };
  });

Here is the plunker

Height of div is unknown until it is actually drawn by browser. You can put $timeout() {console.log("brand: "+element[0].offsetHeight);} then you will see some value. However avoid this if you can. — Petr Averyanov
– Petr Averyanov, Commented Oct 6, 2015 at 11:17

null · Accepted Answer · 2015-10-06 11:17:28Z

1

The link function is executed before the model data is bound to the view (the div does not contain any child elements when you're requesting the offsetHeight. Try wrapping it into a $timeout(function() { /* ... */ }), which will execute at the end of the current digest cycle.

answered Oct 6, 2015 at 11:17

null

7,9163 gold badges39 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sumitjainjr Over a year ago

I have already tried with $timeout function , for eg. I set the interval say 3 sec for all directive but what if I changed the dropdown after 3 sec. I will be getting the height of default selected items but wont be getting other divs height.

null Over a year ago

Also; change the ng-show to ng-if to trigger the link function to execute.

Community · Accepted Answer · 2017-05-23 12:06:37Z

0

Check out AngularJs event to call after content is loaded

This has a nice answer to your problem and seems to work. Second answer down.

I tested on yours by adding the below to your allbranddirective:

        element.ready(function(){
          console.log("brand: "+element[0].offsetHeight);
        });

EDIT:

HTML:

<html>

 <div class="brand-categoryWrp">
          <select ng-model="divtoshow" ng-change="catChange(divtoshow)">
              <option value="allbrands-directive">AllBrands</option>
              <option value="watches-directive">Watches</option>
              <option value="pens-directive">Pens</option>
          </select>
      </div>

      <div allbrands-directive><ul><li ng-repeat='res in brands'>{{res.name}}</li></ul></div>

JS:

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

myapp.controller('mycntrl',function($scope){

  $scope.brands = [{name: 'Adidas'}, {name: 'Armani'}];
  $scope.divtoshow = 'allbrands-directive'

  $scope.catChange = function(val){
    $scope.divtoshow = val;

    if (val == 'allbrands-directive'){
      $scope.brands = [{name: 'Adidas'}, {name: 'Armani'}];
    }else if (val == 'watches-directive') {
      $scope.brands = [{name: 'Adidas1'},{name: 'Armani1'},{name: 'Fossil'}];
    }else if (val == 'pens-directive') {
     $scope.brands = [{name: 'Adidas2'},{name: 'Armani2'},{name: 'Mont blanc'},{name: 'calvin'}];
    }
  }

});

  myapp.directive('allbrandsDirective', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {         

            scope.$watch('brands', function(){
                console.log("brand: "+element[0].offsetHeight);
            });        
        }
    };
  });

So I have changed your code a bit, I have set up only one directive and in here I watch on a change of the brands variable, when this changes we then get the height of the element.

See plunker - http://plnkr.co/edit/vZhn2aMRI6wKn3yVharS?p=preview

If you need each section in separate directives see nulls answers

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Oct 6, 2015 at 11:26

Profane

493 bronze badges

2 Comments

sumitjainjr Over a year ago

It will work only for default selected item, what if I change the dropdown value? I wont be getting the other div height when i select other value from dropdown. (Actually I want the height of div related to dropdown. If I select pen then I want the height of thirddiv).

Profane Over a year ago

yes you are right, this is only getting the height of the initial element. I think you may need to create element directives, then call them onto the page with your on change. I don't have time to test this myself at the moment but will later.

Collectives™ on Stack Overflow

Get height of div in angularjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related