angularjs - Angular ng-if 或 ng-show 响应缓慢(2秒延迟？)

Question

当请求繁忙时，我尝试在按钮上显示或隐藏加载指示器。我通过在加载请求或加载完成时更改 $scope.loading 变量来使用 Angular 来实现这一点。

 $scope.login = function(){
     $scope.loading = true;
    apiFactory.getToken()
        .success(function(data){
            
        })
        .error(function(error){
            
        })
         .finally(function(){
               $timeout(function() {
                 $scope.loading = false;
               }, 0);
         });
 };

在前端:

<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in 
<span ng-if="loading" class="ion-refreshing"></span>
</button>

这工作正常，但加载图标( ionic 刷新)显示大约 2 秒，而 $scope 变量立即更新。我尝试了 $scope.$apply 但这似乎不是这里的问题，范围在请求后立即更新得很好。只是图标响应速度不够快。

Answer 1

如果您不从应用配置和index.html页面中使用ngAnimate，请尝试删除它:

angular.module('myApp', [...'ngAnimate',...])

@Spock；如果您仍然需要使用 ngAnimate，则保持应用程序配置不变，只需添加以下 CSS:

.ng-hide.ng-hide-animate{
     display: none !important;
}

这将在满足您的条件后立即隐藏动画图标。

如您所见，我们将 .ng-hide-animate 设置为隐藏。这就是等待动画完成时导致延迟的原因。正如类名称所暗示的那样，您可以向隐藏事件添加动画，而不是像上面的示例中那样隐藏它。