açısal ng-if veya ng-show yavaş yanıt veriyor (2 saniye gecikme?)


87

Bir istek meşgul olduğunda bir düğmedeki yükleme göstergesini göstermeye veya gizlemeye çalışıyorum. Bunu, bir istek yüklenirken veya yükleme işlemi tamamlandığında $ kapsam.loading değişkenini değiştirerek açısal olarak yaparım.

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

        })
        .error(function(error){

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

Ön uçta:

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

Bu iyi çalışır, ancak yükleme simgesi (iyon yenileme) yaklaşık 2 saniye gösterilirken, $ kapsam değişkeni hemen güncellenir. $ Kapsam. $ Apply'ı denedim ama burada yanlış olan şey bu değil, kapsam gayet iyi ve istekten hemen sonra güncelleniyor. Yeterince hızlı yanıt vermeyen yalnızca simge.

Bunu anlamama yardım ettiğin için teşekkürler!


2
Herhangi bir animasyon var mı?
tasseKATT

Olumsuz. Hiçbir animasyon dahil değildir. Bunun yerine ng sınıfını kullanmak yardımcı oluyor gibi görünüyor.
Jorre

Aynı veya benzer bir sorunu yaşıyorum. Kapsam hemen ve doğru bir şekilde güncelleniyor - Bunu , ilgili öğelerin gösterilmesi gerekip gerekmediğini bulmak için kullanılan $scopeişlevlerden gelen mesajları günlüğe kaydederek doğruladım ng-if. Ancak, düğmeleri bir ng-ifsaniye boyunca yanlış bir şekilde görünür veya gizli kalır. Kısa bir süre sonra tüm düğmeler amaçlanan görünür / gizli durumlarını alır. - Bunun ng-hideyerine kullanarak çalıştım . Açısal sürüm 1.2.16.
KajMagnus

Animasyon kullanmayanlar için herhangi bir çözüm var mı?
Zia Ul Rehman Mughal

Yanıtlar:


124

NgAnimate'i uygulama config ve index.html sayfanızdan kullanmıyorsanız kaldırmayı deneyin :

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

@Spock; Hala ngAnimate kullanımına ihtiyacınız varsa, uygulama yapılandırmanızı değiştirmeden bırakın ve aşağıdaki CSS'yi ekleyin:

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

Bu, koşulunuz karşılandıktan hemen sonra animasyonlu simgeyi gizleyecektir.

Gördüğünüz gibi .ng-hide-animate'i gizli olarak ayarlıyoruz. Animasyonun tamamlanmasını beklerken gecikmeye neden olan budur. Yukarıdaki örnekte olduğu gibi gizlemek yerine sınıf adından da anlaşılacağı gibi hide etkinliğinize bir animasyon ekleyebilirsiniz.


1
Ben sadece bir çift ile basit bir sayfa vardı ng-if, ng-showgözle görülür yavaştı. Çıkardım ngAnimateve benim için sorunu çözdü. Teşekkürler!
Eamonn Gahan

1
Bu benim de yaşadığım bir sorunu çözdü ... ngAnimate'in varlığının neden yavaş geçişe neden olduğunu biliyor musunuz?
Clark

Aynı sorun muydu - ngAnimate'i kaldırmak sorunu çözdü .. ama bu iyi değil .. birçok modülün harika animasyonlar yapması için ngAnimate'e ihtiyacı var .. Ne yapmalı? ngAnimattias neredesin? :)
Spock

21
Durumunda, ng-ifsadece .ng-leave { display:none; }öğeye eklemek benim için hile yaptı ( !importantgerekli değildi).
Joao

40

Aynı sorunu yaşadım ve ng-if veya ng-show / ng-hide kullanmak yerine öğeyi gizlemek için 'gizli' sınıf adıyla ng sınıfını kullanarak bunun etrafında çalıştım.


1
Animasyonlar ve / veya olay işleyicileriyle ilgili görünüyor. Gerçekten emin değilim neden diğerleri yavaş ama bilmek istiyorum
Thiago Festa

1
bunu nasıl yaparsın
jsmedmar

Bu çok daha hızlı! Bu neden??
Aron

1
Bunun, ng-sınıf ifadelerindeki değişiklikler için yapmazken, ngAnimate kullanmanın, ng-if / ng-show kullanan öğelere giriş / çıkış animasyonu davranışlarını uyguladığı gerçeğine bağlı olduğunu düşünüyorum.
John Rix

@neimad bu nasıl yapılır? Benim durumumda, bir özellik değerinin olup olmadığını test etmek için ng-if kullanmam gerekiyor null(ki bu, api çağrısını bekleyen birkaç saniye içindir), bu nedenle iki seçme öğesi kısaca gösteriliyor. Yani hiç kullanmıyor ng-if musun? Teşekkürler.
Chris22

15

Burada bazı çözümler buldum , ancak benim için en iyisi .ng-animate sınıfının stilini geçersiz kılmaktı:

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

Html olarak:

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

Bu bir örnektir: http://jsfiddle.net/9krLr/27/

Umarım size yardımcı olur


10

Benzer bir sorunla karşı karşıyaydım $scope.$evalAsync(), bağlayıcıyı güncellemeye zorlardım.

Mucizevi şekilde çalışır.

$scope.$applyZaten çalışan bir $ özet aşamasıyla çakışabileceğinden kullanmaktan kaçının .

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

Benim için çalıştı. Ama herhangi bir dezavantajı var mı?
Sarah Tammam

1
Ben hiç karşılaşmadım. Eşzamansız işlemler durumunda çok kullanışlıdır.
rach8garg


Bu arada, bu gecikmiş sorun esas olarak localhost ortamında ve üretimde nadiren oluyor - nedenini bilmiyorum
Abdeali Chandanwala

1

Kullanırken aynı sorunu yaşadım

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

Benim durumumda bir sınıf ekleyerek çözdüm:

.hidden {
  display: none;
}

ve sonra kullanmak yerine sınıfı koşullu olarak eklemek *ngIf:

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

Hep böyle kullanılıyorsa, ben yeniden adlandırma ele alacak shouldShowkadar shouldHide(ve devir o mantık etkisiz hale) o kadar kullanılabilecek şekilde, shouldHideyerine !shouldShow.

display: flexDIV'nin mevcut sınıfı için CSS'nizde varsa , bu görüntü özelliği display: hidden. Bunun display: none !importantyerine kolay bir düzeltme kullanılabilir , ancak diğer şekillerde öncelik sağlamak için genellikle daha iyi çözümler vardır. İşte alternatifler hakkında iyi bir okuma .


0

açısal sürüm 1.5.x'te $scope.$apply()yapılan işin koşulundaki değişiklikten sonra eklenmesi burada örnek bir fonksiyondur

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


        }
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.