angular ng-if atau ng-show merespons dengan lambat (penundaan 2 detik?)

Saya mencoba untuk menampilkan atau menyembunyikan indikator pemuatan pada tombol ketika permintaan sedang sibuk. Saya melakukan itu dengan sudut dengan mengubah variabel $ scope.loading ketika permintaan sedang dimuat atau ketika selesai memuat.

 $scope.login = function(){
     $scope.loading = true;
    apiFactory.getToken()
        .success(function(data){

        })
        .error(function(error){

        })
         .finally(function(){
               $timeout(function() {
                 $scope.loading = false;
               }, 0);
         });
 };

Di bagian depan:

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

Ini berfungsi dengan baik, tetapi ikon pemuatan (ion-refreshing) ditampilkan selama sekitar 2 detik, sedangkan variabel $ scope diperbarui segera. Saya mencoba $ scope. $ Apply tetapi sepertinya bukan itu yang salah di sini, scope diperbarui dengan baik dan segera setelah permintaan. Hanya ikonnya yang tidak merespons dengan cukup cepat.

Terima kasih telah membantu saya memahami ini!

Coba hapus ngAnimate jika Anda tidak menggunakannya dari konfigurasi aplikasi dan halaman index.html:

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

@Sukasuka jika Anda masih memerlukan penggunaan ngAnimate, biarkan konfigurasi aplikasi Anda tidak tersentuh dan cukup tambahkan CSS berikut:

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

Itu akan menyembunyikan ikon animasi langsung setelah kondisi Anda terpenuhi.

Seperti yang Anda lihat, kami menyetel .ng-hide-animate menjadi tersembunyi. Inilah yang menyebabkan penundaan karena menunggu animasi selesai. Anda dapat menambahkan animasi ke acara hide seperti yang tersirat dari nama kelasnya daripada menyembunyikannya seperti pada contoh di atas.

Saya memiliki masalah yang sama, dan mengatasinya dengan menggunakan ng-class dengan nama kelas 'tersembunyi' untuk menyembunyikan elemen daripada menggunakan ng-if atau ng-show / ng-hide.

Saya menemukan beberapa solusi di sini , tetapi yang terbaik bagi saya adalah mengganti gaya untuk kelas .ng-animate:

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

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

Ini adalah contohnya: http://jsfiddle.net/9krLr/27/

Saya harap membantu Anda.

Saya menghadapi masalah serupa, saya dulu $scope.$evalAsync() memaksa memperbarui pengikatan.

Ini bekerja seperti pesona.

Hindari penggunaan $scope.$applykarena dapat bertentangan dengan fase $ digest yang sudah berjalan.

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

Saya memiliki masalah yang sama saat menggunakan

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

Dalam kasus saya, saya menyelesaikannya dengan menambahkan kelas:

.hidden {
  display: none;
}

lalu menambahkan kelas secara bersyarat daripada menggunakan *ngIf:

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

Jika selalu menggunakannya dengan cara ini, saya akan mempertimbangkan shouldShowuntuk mengganti nama menjadi shouldHide(dan meniadakan logika yang menetapkannya), sehingga dapat digunakan sebagai shouldHidepengganti!shouldShow .

Jika Anda memiliki display: flexCSS untuk kelas DIV yang ada, properti tampilan itu mungkin lebih diutamakan daripada display: hidden. Cara yang mudah dapat digunakan display: none !importantsebagai gantinya, tetapi sering kali ada solusi yang lebih baik untuk memastikan prioritas dengan cara lain. Berikut adalah bacaan yang bagus tentang alternatif .

dalam versi sudut 1.5.x menambahkan $scope.$apply()setelah perubahan kondisi selesai pekerjaan untuk saya di sini adalah contoh fungsi

$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();
            }


        }