angular ng-if 或 ng-show 响应缓慢(延迟 2 秒?) [英] angular ng-if or ng-show responds slow (2second delay?)

问题描述

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

I'm trying to show or hide a loading indicator on a button when a request is busy. I do that with angular by changing the $scope.loading variable when a request is loading or when it's done loading.

 $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>

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

This works fine, but the loading icon (ion-refreshing) is shown for about 2 seconds, while the $scope variable is updated immediately. I tried $scope.$apply but that doesn't seem to be what's wrong here, the scope is updated just fine and immediately after the request. It's just the icon that isn't responding quickly enough.

推荐答案

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

Try removing ngAnimate if you're not using it from your app config and index.html page:

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

@Spock;如果您仍然需要使用 ngAnimate，请保持您的应用配置不变，只需添加以下 CSS:

@Spock; if you still require the use of ngAnimate then leave your app config untouched and just add the following CSS:

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

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

That will hide the animated icon straight after your condition is met.

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

As you can see we are setting .ng-hide-animate to hidden. This is what causes the delay as it waits for the animation to complete. You can add an animation to your hide event as the class name implies instead of hiding it as in the example above.

这篇关于angular ng-if 或 ng-show 响应缓慢(延迟 2 秒?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！