CODEWITHSUNDEEP
angularjs
user4328424
user4328424

Reputation:

How to get width of a dynamically created element with $comiple in Angularjs

So I want to create an element in angular and append it to DOM : 

   //in my directive I've created an element as bellow :

  el = $compile('<span>Hello dynamically</span>')($scope);

  // and then I appended it to my DOM like this : 

  myDomElement.append(el);

So far so good , no errors no nothing .

All I'm looking for is to how to get the width of this el that I've created in my directive ?

Normally when I want to get width of an element I'll get the offsetWidth of that element ,

I'm looking for something like this : 

   el = $compile('<span>Hello dynamically</span>')($scope);

   var width  = el.offsetWidth   ; // I want the width here !!
   console.log(width); // will log 0 !!!!!!
   console.log(el); // will show an Object that has a **offsetWidth:134** property !!!!!!!

   myDomElement.append(el);

But when I log this , I always get 0 , it's weird because when I look at my developer tools in chrome I can see that offsetWidth is not 0 !

Upvotes: 0

Views: 954

Answers (1)

Milad
Milad

Reputation: 28592

Do this : 

 el = $compile('<span>Hello dynamically</span>')($scope);
 myDomElement.append(el);
 var width  = el.offsetWidth   ; // I want the width here !!
 console.log(width);

Means first append the element to DOM , then get it's width

Upvotes: 1

Related Questions