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

Question

我需要一些帮助来使用 typescript 在 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>

正如我们所见，“showPhoneNumber”是一个 bool 变量。当它为 false 时，第一个按钮应该可见，当它为 true 时，第二个按钮应该可见。以下是我在 typescript 文件中更改此 bool 变量值的方式:

typescript :

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

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

Answer 1

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

• 在超时回调中将 scope.showPhoneNumber 设置为 false 后调用 scope.apply
• 使用$timeout Angular 服务