Ng-if / ng-hide不会在HTML页面上实时更新。 [英] Ng-if/ng-hide doesn't get updated on real time on HTML page.

问题描述

大家好，



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



我尝试过：



以下是2个html按钮：

Hi All,

I need some help in implementing a small change in angularJs with typescript. I basically need to change the text of a button for 3 seconds from the time it is being clicked, and revert the original text after 3 seconds are over. For this, I have created 2 html elements (buttons). I have applied ng-if directive for this purpose. Basically my aim is is as soon as the first button is clicked, it should get hidden and the other button should be displayed for just 3 seconds. After 3 seconds, the first button should come again.

What I have tried:

Following are the 2 html buttons:

<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文件中更改此布尔变量值的方法：



打字稿：

As we can see, 'showPhoneNumber' is a boolean variable. When it is false, first button should be visible, and when it is true, second button should be visible. Following is the way I am changing the value of this boolean variable in typescript file:

Typescript:

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

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

As soon as I click the first button, showPhoneNumber becomes true and first button gets hidden and I can see the second button. However the problem is, it is taking much more than 3 seconds (around 20 seconds) to get reverted and showing the first button again. Why ng-if is not getting binded from true to false after 3 seconds. I am not sure where I am going wrong. Can you please help?

推荐答案

这是我在这里的第一个答案，请原谅我可能出现的错误。



Angular中的数据绑定由称为摘要循环的东西工作，每次调用时都会检查视图和模型之间的差异。如果您从视图中调用函数，就像使用

As this is my first ever answer on here, excuse me for possible mistakes.

Data bindings in Angular work by a thing called digest cycle, which whenever called checks for differences between your view and your model. If you call a function from your view like you do with

click="testAudio()"

它会自动换行

it's automatically wrapped in an

apply（）功能，它启动摘要周期并更新您的视图。当你的超时然后完成布尔值更改为false，但Angular不知道，所以你必须手动调用

apply() funtion, which starts an digest cycle and updates your view. When your timeout then completes the boolean changes to false, but Angular doesn't know, so you have to either call

apply（）或使用

apply() manually or use the

这篇关于Ng-if / ng-hide不会在HTML页面上实时更新。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！