CODEWITHSUNDEEP
angularjsangularjs-directive
sumitjainjr
sumitjainjr

Reputation: 771

Get height of div in angularjs

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

Upvotes: 0

Views: 3347

Answers (2)

Profane
Profane

Reputation: 49

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

Upvotes: 0

null
null

Reputation: 7926

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.

Upvotes: 1

Related Questions