ANGULARJS

accessing using class and setting height dynamically

by Ankit Patidar

HTML

<div orientable class=main ng-app="myApp" ng-controller="SalesController">
        <div class=ele1> </div>
         <div class=ele2> </div>
          <div class=ele3 ng-style="{height: hgt+ 'px'}" ></div>
    </div>
    {{h = $element[0].getElementsByClassName('ele1')[0].clientHeight; ""}}
          {{h}}

CSS

body,html,form{
  height:100%;
  width:100%;
  float:left;
  }
  .main{
    height:100%;
    width:100%;
    float:left;
  }
  .ele1{
    height:30%;
    width:100%;
    float:left;
    border:1px solid red;
  }
   .ele2{
    height:40%;
    width:100%;
    float:left;
    border:1px solid red;
  }
   .ele3{
    width:100%;
    float:left;
    border:1px solid green;
  }

JavaScript

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

myApp.controller('SalesController',function($scope,$element){
//dynamically setting the height
 $scope.hgt = 15;
 var k = $element[0].getElementsByClassName('ele1')[0].clientHeight;
 alert(k)
 $scope.hgt = k;
});         


myApp.directive('orientable', function () {       
    return {
    	restrict: 'AEC',
        link: function(scope, element, attrs, controller) {
              
              //this both will work fine
              /*
               alert(element.children()[0].offsetHeight);
               alert(element.children()[0].clientHeight);
               alert(element.children()[1].offsetHeight);
               alert(element.children()[1].clientHeight);
               element.children()[0].style.height="250px";
               */
               
               
               
               //accessing the element with class
         alert(element[0].getElementsByClassName("ele1")[0].clientHeight)
              
        }
    }
});