Question

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

喜欢这样......

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控制器中的

resetTimer（）函数

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

它创建的按钮足够精细，但是当我单击它以调用resetTimer() Angular控制器内的timerControl函数时，它甚至不能进入函数，否则{{1} 1}}会在Google Chrome中的Google Dev Tools中显示console.log(111)。似乎它可能是111或类似的问题。我尝试使用DOM，似乎没有太多关于此的信息。以前有人遇到过这个吗？

Answer 1

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

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

Answer 2

你应该能够使用Angular（没有jQuery）和你在视图控制器中设置的变量来做到这一点。

您可以使用ng-if指令处理按钮的创建，并通过控制器变量管理此条件以创建按钮（控制器的范围为vm，如下所示）。然后在视图的控制器中调用resetTimer（）函数。

例如：

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

使用.innerHTML创建<button>。单击时，按钮不在Angular控制器中调用功能

2 个答案: