1

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?

Giraldi
  • 16,451
  • 6
  • 33
  • 52

1 Answers1

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

Community
  • 1
  • 1
tasseKATT
  • 38,470
  • 8
  • 84
  • 65