Javascript angularjs ng在相同模型的隐藏div中显示延迟

我的代码如下：

<button class="btn-border-blue" ng-show="!hasCouponCode" ng-click="hasCouponCode = true;">Cupom</button>
<div class="form-inline-cupom" ng-show="hasCouponCode">
    <input type="text" ng-model="couponCode" placeholder="Código do cupom">
    <button class="btn-green" ng-click="addCoupon()">Add cupom</button>
</div>

Cupom
加杯

当我单击按钮时，它会更改模型值“hasCouponCode”，隐藏该按钮并显示

div

元素，但存在延迟，视觉效果不好

有没有办法解决这个问题

---

谢谢

我创建了这个代码段，它运行得非常快。我认为AddCouncil（）方法中可能有一个服务器回调，这会减慢速度。您应该提高服务器端代码的性能。如果不能，最好在视图中添加一个加载屏幕，以便用户在等待时知道某些东西正在工作。我希望这有帮助

（函数（角度）{
var-app=angular.module（'myApp'，[]）；
var Maincontroller=函数（$scope）{
$scope.add优惠券=函数（）{
$scope.mycoon=$scope.couponCode；
}
};
app.controller（“maincontroller”，[“$scope”，maincontroller]）；
}（角度）

库普姆
加杯
{{mycoon}}

用外部div包围按钮，然后在该div中使用ng show，可以解决此问题。如下所示：

<div ng-show="!hasCouponCode">
<button class="btn-border-blue" ng-click="hasCouponCode = true;">Cupom</button>
</div>


库普姆

像这样，您也可以将其应用于代码的其余部分
 可视性不好，如？如果您的应用程序注入的ngAnimate不好，请从应用程序中删除ngAnimate，因为首先显示div，然后仅在1秒或2秒后按钮才会隐藏