Question

我需要一些帮助来实现angularcript的angularJs的小变化。我基本上需要在点击按钮时更改按钮文本3秒钟，并在3秒钟结束后恢复原始文本。为此，我创建了2个html元素（按钮）。为此，我已经应用了ng-if指令。基本上我的目标是，只要单击第一个按钮，它就会被隐藏，另一个按钮应该只显示3秒钟。 3秒后，第一个按钮应该再次出现。

以下是2个html按钮：

<div class="action">
                            <button class="configure-link" ng-if="!showPhoneNumber" ng-click="testAudio()">Listen</button>
                            <button class="configure-link" ng-if="showPhoneNumber"> Calling {{phonenumber}}</button>
</div>

我们可以看到，＆＃39; showPhoneNumber＆＃39;是一个布尔变量。如果为false，则应显示第一个按钮，如果为true，则应显示第二个按钮。以下是我在typescript文件中更改此布尔变量值的方法：

打字稿：

scope.showPhoneNumber = false;
scope.testAudio = () =>{
scope.showPhoneNumber = true;
                setTimeout(function () { scope.showPhoneNumber = false }, 3000);
}

单击第一个按钮后，showPhoneNumber变为true，第一个按钮被隐藏，我可以看到第二个按钮。然而问题是，恢复并再次显示第一个按钮花费的时间超过3秒（大约20秒）。为什么ng-if在3秒后没有从true绑定到false。我不确定我哪里出错了。你能帮忙吗？

Answer 1

因为您使用的是setTimeout函数，而不是$timeout Angular服务。在调用$ apply之前，Angular不知道范围发生了变化。可能的修复：

在超时回调
使用$timeout Angular服务

Answer 2

如前所述，setTimeout不会通知Angular，为什么最佳做法是使用$ timeout。但是，您仍然可以保留旧代码，只需在$apply();之后添加scope.showPhoneNumber = false;：

setTimeout(function () { 
  scope.showPhoneNumber = false;
  $apply();
}, 3000);

如果您想知道使用$apply()的原因和时间，请查看此帖子：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

ng-if / ng-hide在HTML网页

2 个答案: