角度のあるng-ifまたはng-showの応答が遅い（2秒の遅延？）

リクエストがビジーのときにボタンの読み込みインジケーターを表示または非表示にしようとしています。リクエストの読み込み中または読み込みが完了したときに$ 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>

これは正常に機能しますが、読み込みアイコン（ion-refreshing）が約2秒間表示され、$ scope変数はすぐに更新されます。$ scope。$ applyを試しましたが、ここでは問題はないようです。スコープは正常に更新され、リクエストの直後に更新されます。十分な速さで応答しないのはアイコンだけです。

私がこれを理解するのを手伝ってくれてありがとう！

ngAnimateを使用していない場合は、アプリのconfigページとindex.htmlページから削除してみてください。

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

@スポック; それでもngAnimateを使用する必要がある場合は、アプリの構成を変更せずに、次のCSSを追加するだけです。

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

これにより、条件が満たされた直後にアニメーションアイコンが非表示になります。

ご覧のとおり、.ng-hide-animateをhiddenに設定しています。これが、アニメーションが完了するのを待つときに遅延が発生する原因です。上記の例のように非表示にする代わりに、クラス名が示すように、非表示イベントにアニメーションを追加できます。

同じ問題が発生し、ng-ifまたはng-show / ng-hideを使用する代わりに、「hidden」クラス名を持つng-classを使用して要素を非表示にすることで回避しました。

ここでいくつかの解決策を見つけましたが、私にとって最善の方法は、.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: flexDIVの既存のクラスのためのあなたのCSSには、その表示プロパティは、より優先がかかる場合がありますdisplay: hidden。display: none !important代わりに簡単な修正を使用することもできますが、他の方法で優先順位を確保するためのより良い解決策があることがよくあります。ここに代替案についての良い読み物があります。

Angularバージョン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();
            }


        }