javascript - 使用 .innerHTML 创建 。单击时，按钮不会调用 Angular Controller 中的函数

Question

使用 Angular，我正在创建一个倒计时器应用程序。当计时器到达某一点时，计时器停止，播放通知声音，并创建一个带有 button 的 div。

像这样...

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>'

Angular timerControl Controller 内部的resetTimer()函数

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

它创建的按钮足够好，但是当我单击它来调用 timerControl Angular Controller 内的 resetTimer() 函数时，它甚至没有进入函数，否则 console.log(111) 将在 Google Chrome 的 Google 开发工具中显示 111。看起来这可能是 DOM 或类似问题的问题。我尝试使用 jQuery ，但似乎没有太多关于此的信息。有人遇到过这种情况吗？

Answer 1

Angular 不知道您执行了 .innerHTML 赋值。您必须通过调用 $compile 来告诉它。请参阅文档:https://docs.angularjs.org/api/ng/service/$compile

这里有一个关于该过程的快速教程: http://onehungrymind.com/angularjs-dynamic-templates/