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

Question

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 !

Milad · Accepted Answer · 2015-07-15 14:33:55Z

1

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

answered Jul 15, 2015 at 14:33

Milad

28.8k11 gold badges78 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user4328424 Over a year ago

Thanks mate , It works , can you explain why is that ?

DMSilva Over a year ago

An element does not have a width or a height if it's not in the DOM.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related