<button>使用.innerHTML</button>创建<button>。</button> <button>单击时，按钮未调用Angular控制器中的函数</button>

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?

Answer 1

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/

Answer 2

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>