user3501613 user3501613 - 1 month ago 21
AngularJS Question

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

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.

Answer

we can access the element by using javascript or by angularJS,In above answer they are using javascript to access the elements.In angularJS 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;
 });