角度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>

这工作正常,但加载图标(离子刷新)显示约2秒,而$ scope变量立即更新.我尝试了$ scope.$ apply但这似乎不是什么错误,范围在请求后立即更新.这只是图标没有足够快速响应.

谢谢你帮我理解这个!

Answer 1

如果您没有在app config和index.html页面中使用它,请尝试删除ngAnimate:

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

@Spock; 如果你仍然需要使用ngAnimate,那么保持你的应用程序配置不受影响,只需添加以下CSS:

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

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

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

Answer 2

我有同样的问题,并通过使用带有'隐藏'类名的ng-class隐藏元素而不是使用ng-if或ng-show/ng-hide来解决它.

Answer 3

我在这里找到了一些解决方案,但对我来说最好的是覆盖.ng-animate类的样式:

.ng-animate.no-animate {
    transition: 0s none;
    -webkit-transition: 0s none;
    animation: 0s none;
    -webkit-animation: 0s none;
}

在html中:

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

这是一个例子:http://jsfiddle.net/9krLr/27/

我希望能帮助你.

Answer 4

我遇到了类似的问题,我曾经$scope.$evalAsync()强制更新绑定.

它就像一个魅力.

避免使用,$scope.$apply因为它可能与已经运行的$ digest阶段冲突.

if(selectedStatistics.length === 0 || selectedWorkgroups.length === 0){
    ctrl.isSaveDisabled = true;
    $scope.$evalAsync();
} else{
    ctrl.isSaveDisabled = false;
    $scope.$evalAsync();
}