AngularJS: Cannot get innerHTML of dynamic element within a directive

Question

I am trying to get the innerHTML of an element with dynamic content form within a directive.

Below is the Plunker:

https://plnkr.co/edit/rXVin1LPWzpH4eMqZc7R?p=preview

The one in green is the expected result. The one in red is the part I hope to get working.

Notice on the console.log result, the outcome for el.innerHTML is {{ item }}. Why isn't it getting the text that is bound to it? How do I get it to work?

Thanks, @digit! That's one way of doing it. plnkr.co/edit/8vGmylxVOUerWctZOF7q?p=preview — Giraldi
– Giraldi, Commented Jan 4, 2017 at 7:52

Community · Accepted Answer · 2017-05-23 12:01:54Z

4

It's because Angular hasn't finished processing the child templates from ng-repeat.

You can warp the code in scope.$evalAsync to make it work:

link: function(scope, element, attr, content) {

  scope.$evalAsync(function() {

    var el = element[0];

    // Code
  });
}

More on $evalAsync vs $timeout: https://stackoverflow.com/a/17303759/2887841

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Jan 4, 2017 at 7:38

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

1 Comment

Giraldi Over a year ago

Thanks. Works great!

Collectives™ on Stack Overflow

AngularJS: Cannot get innerHTML of dynamic element within a directive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related