CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsinnerhtml
Erik Åsland
Erik Åsland

Reputation: 9782

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

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?

Upvotes: 0

Views: 603

Answers (2)

tangentstorm
tangentstorm

Reputation: 7295

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/

Upvotes: 2

Robert Anderson
Robert Anderson

Reputation: 1256

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>

Upvotes: 0

Related Questions