Created <button> using .innerHTML. When clicked, button isn't calling function in Angular controller

Question

Using Angular, I am creating a countdown timer app. When the timer reaches a certain point, the timer stops, a notification sound is played and a div with a button is created.

Like so...

HTML:

<div id='test'></div>

Javascript:

 document.getElementById('test').innerHTML= '<div id="break-div"><button id="4"ng-click="timerControl.resetTimer()">Back to work!</button></div>'

resetTimer() function inside of Angular timerControl controller

this.resetTimer = function(){
    console.log(111)
    _this.resetWorkFlow = true;
}

It creates the button fine enough, but when I click it to call the resetTimer() function inside of the timerControl Angular controller, it isn't even entering the function, otherwise the console.log(111) would be showing 111 in my Google Dev Tools in Google Chrome. Seems like it could be an issue with the DOM or something like that. I tried using jQuery and it seems like there isn't much information about this out there. Anyone encounter this before?

georgeawg · Accepted Answer · 2016-02-18 04:48:07Z

2

Angular doesn't know that you did the .innerHTML assignment. You have to tell it, by invoking $compile. See the docs: https://docs.angularjs.org/api/ng/service/$compile

There's a quick tutorial about the process here: http://onehungrymind.com/angularjs-dynamic-templates/

edited Feb 18, 2016 at 4:48

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Feb 18, 2016 at 0:26

tangentstorm

7,3752 gold badges33 silver badges39 bronze badges

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

4 Comments

Erik Åsland Over a year ago

@tangentstrom Thanks for pointing me in the right direction. Where do you put your directives? In the corresponding controller of the template?

Erik Åsland Over a year ago

@tangentstrom Also, I've never made a directive before, nothing really seems to make sense. :/

Erik Åsland Over a year ago

Also, I don't really understand the docs. What does $compile do anyway?

georgeawg Over a year ago

The $compile service is where the JavaScript for the ng-click directive is stored. When you use the $compile service it instantiates the stored JavaScript and links it to the scope that you specify.

Robert Anderson · Accepted Answer · 2016-02-18 00:24:25Z

0

You should be able to do this just with Angular (without jQuery) and the variables you have set up in the view's controller.

You could handle the creation of the button using an ng-if directive and manage this condition for button creation through controller variables (scope of controller being vm below). Then call the resetTimer() function within the view's controller.

For example:

<div ng-if="vm.resetWorkFlow">
    <button id="4" ng-click="vm.resetTimer()">Back to work!</button>
</div>

answered Feb 18, 2016 at 0:24

Robert Anderson

1,2568 silver badges11 bronze badges

1 Comment

Erik Åsland Over a year ago

Thanks for your suggestion, but that didn't work. I think it has to do with the fact that the content I am displaying to the page is dynamic on the DOM (since I am using innerHTML()) and angular doesn't know that that button exists because of the corresponding disconnect...

Collectives™ on Stack Overflow

Created <button> using .innerHTML. When clicked, button isn't calling function in Angular controller

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related