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

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!

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.

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.

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

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

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 .

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


        }