ng-show / ng-hide不会立即发生

Question

我有一个“录制”按钮和一个“停止”按钮。 “录制”按钮具有ng-hide =“录制”，“停止”按钮具有ng-show =“录制”

单击“Record”时设置$ scope.recording = true，但是在显着的时间（~100ms）内，“Record”按钮消失前，“Record”和“Stop”按钮都可见。

此行为也发生在具有类似关系的各种其他按钮上。有没有人知道为什么会这样？ （我目前处于角度1.2.18，这可能是一个问题吗？）

谢谢！

Answer 1

感谢您的跟进。我真的很感激社区的热心帮助。我发现问题是由于ngAnimate的旧版本造成的。我不太清楚为什么，但将其升级到最新版本有帮助。

谢谢！

Answer 2

很高兴您找到了问题的原因。无论如何，这是实现问题情况的更好方法。

在您的情况下，不需要使用范围变量来操纵DOM元素。

相反，

<button ng-click="recordStopToggle = !recordStopToggle" ng-hide="recordStopToggle">Record</button>
<button ng-click="recordStopToggle = !recordStopToggle" ng-show="recordStopToggle">Stop</button>

你也可以使用ng-class来切换类来显示/隐藏，像这样，

<button ng-class="{true: 'btn-primary', false: 'btn-danger'}[!recordStopToggle]" ng-click="recordStopToggle = !recordStopToggle;">{{!recordStopToggle && 'Record' || 'Stop'}}</button>

如果您需要通过此按钮调用其他功能，则可以在ng-click

中执行此操作

ng-click="editBtnToggle = !editBtnToggle; yourFunction();"

通过这种方式，您提到的时间延迟应该不是问题。

如果您对此解决方案有任何疑问，请与我们联系。