Get elements properties(height/width) without using Directives in AngularJS

Question

In angularJS we can use Directives to access the elements and we can set properties using these Directives. I want to get/set some properties for DOM elements without using Directives.

<div class=main ng-app="myApp" ng-controller="SalesController">
    <div class=ele1> </div>
    <div class=ele2> </div>
    <div class=ele3></div>
</div>

In some places I want the height of some elements to do some calculations:

var myApp = angular.module('myApp', []);
myApp.controller('SalesController',function($scope){
    //this code not working
    document.getElementsByClassName("ele1").clientHeight;
});

I know how to get the height by using directives but in some case we need height/width of div elements in different part of the project, adding directive every time will increase the code.

Is there a single line way to find the height/width of a div in angularjs (like $("classname").height() in jquery)? I would prefer to do so without using jQuery.

Why your `CLASS` name is different like `ele1,ele2,ele3`? You should use same `CLASS` name of your DOM element. Because many DOM element can have same `CLASS`. But `ID` is Unique for a HTML page — Sumon Sarker, Oct 20 '16 at 14:43
@SumonSarker: Here i used same class name for simple example,,,thanks for your support... — user3501613, Oct 23 '16 at 13:06
@ZeRubeus: I need to get element randomly, i can't use $element[0] like this because in some case i will create UI dynamically.... whether i can use $element for that purpose... eg: i have some 10 child div inside one parent div and i don't know the correct position of the required child div it may be in 0 or 1 or 5th position so in this case how i will use $element to access that object, please help me — user3501613, Oct 23 '16 at 13:24

Sumon Sarker · Answer 1 · 2016-10-20T14:32:14.660

You can find height/width of DOM elements using JavaScript loops.

Example:

var myApp = angular.module('myApp', []);
myApp.controller('SalesController',function($scope){
  var objects = document.getElementsByClassName('YOUR_CLASS_NAME');
  var height = 0;
  for(var i=0;i<objects.length;i++){
    height = objects[i].clientHeight;
    console.log(height); /*Output in JS console*/
    alert(height); /*Output in window alert Box*/
  }
});

Note : document.getElementsByClassName() function return Object Array.

document.getElementById() return single Object. You can't use clientHeight property directly in Object Array selector. Because clientHeight is a single Object Property.

Some other JavaScript DOM selector function

document.getElementById() /*Return single Object*/
document.getElementsByTagName() /*Return Object Array*/
document.getElementsByTagNameNS()
document.getElementsByName()
document.querySelector()
document.querySelectorAll()
....

also ```element.getBoundingClientRect().height``` may come handy - http://stackoverflow.com/questions/32438642/clientwidth-and-clientheight-report-zero-while-getboundingclientrect-is-correct — shershen, Oct 20 '16 at 14:36

score 1 · Accepted Answer · edited Jul 05 '17 at 07:02

we can access the element by using javascript or by angular js, In above answer, they are using javascript to access the elements.In angular js, we can inject $element in controller and we can access any elements by using class or id

myApp.controller('SalesController',function($scope,$element){
 //here we are using 2 indexes but that is not the position index of child elements
 var temp=$element[0].getElementsByClassName('ele1')[0].clientHeight;
 });

Get elements properties(height/width) without using Directives in AngularJS

2 Answers2