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

问题描述

我正在尝试在请求繁忙时显示或隐藏按钮上的加载指示符。我通过在加载请求或加载完成时更改$ scope.loading变量来实现角度。

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.

感谢您帮助我理解这一点！

Thanks for helping me understand this!

推荐答案

如果您没有在app config和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.

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