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

Question

我有一个"记录"按钮和一个"停止"按钮。"录制"按钮有一个 ng-hide="recording"，"停止"按钮有一个 ng-show="recording"

单击"记录"时，我设置了$scope.recording = true，但是在相当长的时间内（~100ms），在"录制"按钮消失之前，"记录"和"停止"按钮都可见。

此行为也发生在具有类似关系的其他各种按钮上。有谁知道为什么会这样？（我目前使用的是角度 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();"

---

这样，您提到的时间延迟应该不是问题。

如果您对此解决方案有任何问题，请告诉我。