0

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

sumitjainjr
  • 741
  • 1
  • 8
  • 28
  • Why do you need height of a div – Lalit Rao Oct 06 '15 at 11:12
  • 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 Oct 06 '15 at 11:17

2 Answers2

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.

null
  • 7,906
  • 3
  • 36
  • 37
  • 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. – sumitjainjr Oct 06 '15 at 11:32
  • Also; change the `ng-show` to `ng-if` to trigger the `link` function to execute. – null Oct 06 '15 at 14:53
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

Community
  • 1
  • 1
Profane
  • 49
  • 3
  • 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). – sumitjainjr Oct 06 '15 at 11:40
  • 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. – Profane Oct 06 '15 at 13:18