AngularJS ng-click inside innerHTML

Question

I have this code below:

acrossText = acrossText + activeWordList[w].placeOrder + ". " + activeWordList[w].clue + "<button ng-click='speak()'>Speak</button> " + "<br /><br />";
document.getElementById('div1').innerHTML = acrossText;

However ng-click="speak()" inside innerHTML is not firing. What's wrong?

Nachshon Schwartz · Accepted Answer · 2015-05-11 19:51:12Z

3

The code is not being compiled. You must compile it using $compile.

https://docs.angularjs.org/api/ng/service/$compile

answered May 11, 2015 at 19:51

Nachshon Schwartz

15.9k20 gold badges65 silver badges99 bronze badges

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

Comments

lucky7id · Accepted Answer · 2015-05-11 19:55:32Z

0

A couple of things here:

The ng-click directive has already run, so it doesn't know about your dynamically added element.
Dynamically adding content using innerHTML, or the like, is generally frowned upon when using angular. This looks like you are trying to re-create the functionality of a directive I would suggest going this route, as it will give you the tools you need to fix your code.

answered May 11, 2015 at 19:55

lucky7id

3851 silver badge9 bronze badges

Collectives™ on Stack Overflow

AngularJS ng-click inside innerHTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related