ng-if/ng-hide 不会在 HTML 页面上实时更新

Question

我需要一些帮助，用typescript在angularJs中实现一个小的改变。我基本上需要改变一个按钮的文本3秒的时间，从它被点击，并恢复原始文本后3秒结束。为此，我创建了2个html元素(按钮)。为此我使用了ng-if指令。基本上我的目标是，一旦第一个按钮被点击，它应该被隐藏，而另一个按钮应该只显示3秒。3秒后，第一个按钮应该再次出现。

下面是两个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>

可以看到，'showPhoneNumber'是一个布尔变量。当它为false时，第一个按钮应该可见，当它为true时，第二个按钮应该可见。下面是我在typescript文件中改变这个布尔变量值的方法:

打印稿:

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

当我点击第一个按钮时，showPhoneNumber变为true，第一个按钮被隐藏，我可以看到第二个按钮。然而问题是，它需要超过3秒(大约20秒)才能恢复并再次显示第一个按钮。为什么ng-if在3秒后没有从真绑定到假。我不确定我哪里出错了。你能帮帮我吗?

Answer 1

因为你使用的是setTimeout函数而不是$timeout Angular服务。直到调用了$apply, Angular才知道作用域上发生了变化。可能的修复:

• 调用范围。设置范围后应用。showPhoneNumber设置为false
• 使用$timeout Angular service

Answer 2

正如前面提到的，setTimeout不会通知Angular，这就是为什么最好使用$timeout来代替。但是，您仍然可以保留旧代码，只需在scope.showPhoneNumber = false;后面添加$apply();，如下所示:

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

如果你想知道为什么和什么时候使用$apply()，看看这篇文章:http://jimhoskins.com/2012/12/17/angularjs-and-apply.html