角度ng-if或ng-show响应缓慢（2秒延迟？）

我正在尝试在请求繁忙时在按钮上显示或隐藏加载指示器。我通过在加载请求或加载完成后更改$ scope.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，但这似乎不是问题所在，作用域可以在请求后立即更新。只是图标没有足够快地响应。

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

如果不从应用程序配置和index.html页面中使用ngAnimate，请尝试将其删除：

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

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

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

满足条件后，将立即隐藏动画图标。

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

我遇到了同样的问题，并通过使用带有“隐藏”类名称的ng-class来隐藏元素而不是使用ng-if或ng-show / ng-hide来解决此问题。

我在这里找到了一些解决方案，但是对我来说最好的是覆盖.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/

希望对您有帮助。

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

它像一种魅力。

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

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

使用时我遇到了同样的问题

<div *ngIf='shouldShow'>
    <!-- Rest of DIV content here -->
</div>

就我而言，我通过添加一个类解决了它：

.hidden {
  display: none;
}

然后有条件地添加类，而不是使用*ngIf：

<div [ngClass]="{'hidden': !shouldShow}">
    <!-- Rest of DIV content here -->
</div>

如果总是用这种方式，我会考虑重新命名shouldShow，以shouldHide（和否定的是给它分配的逻辑），因此它可以作为shouldHide代替!shouldShow。

如果您display: flex的CSS中包含DIV的现有类，则该display属性可能优先于display: hidden。可以使用一个简单的解决方法display: none !important，但是通常会有更好的解决方案以其他方式确保优先级。这是有关替代品的很好的阅读。

在角度版本1.5.x中$scope.$apply()，在条件变化完成后添加的功能对我来说是一个示例函数

$scope.addSample = function(PDF)
        {
            var validTypes ="application/pdf";
            if(PDF.type == validTypes)
            {
                //checking if the type is Pdf and only pdf
                $scope.samplePDF= PDF.files[0];
                $scope.validError = false;
                $scope.$apply();
            }

            else
            {
                 $scope.validError = true;
                 $scope.samplePDF= null;
                 $scope.$apply();
            }


        }