kątowe ng-if lub ng-show reaguje wolno (2-sekundowe opóźnienie?)

Próbuję pokazać lub ukryć wskaźnik ładowania na przycisku, gdy żądanie jest zajęte. Robię to z angular, zmieniając zmienną $ scope.loading podczas ładowania żądania lub po zakończeniu ładowania.

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

        })
        .error(function(error){

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

Na froncie:

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

Działa to dobrze, ale ikona ładowania (odświeżanie jonów) jest wyświetlana przez około 2 sekundy, podczas gdy zmienna $ scope jest aktualizowana natychmiast. Próbowałem użyć $ scope. $ Apply, ale to nie wygląda na to, co jest nie tak, zakres jest aktualizowany dobrze i natychmiast po żądaniu. To tylko ikona, która nie reaguje wystarczająco szybko.

Dzięki za pomoc w zrozumieniu tego!

Spróbuj usunąć ngAnimate, jeśli nie używasz go z konfiguracji aplikacji i strony index.html:

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

@Spock; jeśli nadal potrzebujesz ngAnimate, pozostaw konfigurację aplikacji nietkniętą i po prostu dodaj następujący CSS:

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

Spowoduje to ukrycie animowanej ikony zaraz po spełnieniu twojego warunku.

Jak widać, ustawiamy .ng-hide-animate na ukryty. To właśnie powoduje opóźnienie w oczekiwaniu na zakończenie animacji. Możesz dodać animację do swojego zdarzenia hide, jak sugeruje nazwa klasy, zamiast ją ukrywać, jak w powyższym przykładzie.

Miałem ten sam problem i obejść go, używając ng-class z `` ukrytą '' nazwą klasy, aby ukryć element, zamiast używać ng-if lub ng-show / ng-hide.

Znalazłem tutaj kilka rozwiązań , ale dla mnie najlepsze było nadpisanie stylizacji dla klasy .ng-animate:

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

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

To jest przykład: http://jsfiddle.net/9krLr/27/

Mam nadzieję, że ci pomogę.

Miałem podobny problem, $scope.$evalAsync()wymuszałem aktualizację wiązania.

To działa jak urok.

Unikaj używania, $scope.$applyponieważ może to powodować konflikt z już uruchomioną fazą podsumowania $.

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

Miałem ten sam problem podczas używania

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

W moim przypadku rozwiązałem to dodając klasę:

.hidden {
  display: none;
}

a następnie warunkowe dodanie klasy zamiast używania *ngIf:

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

Jeśli zawsze używam go w ten sposób, rozważałbym zmianę nazwy shouldShowna shouldHide(i zanegowanie logiki, która go przypisuje), więc może być używany jako shouldHidezamiast !shouldShow.

Jeśli masz display: flexw swoim CSS istniejącą klasę DIV, ta właściwość wyświetlania może mieć pierwszeństwo przed display: hidden. display: none !importantZamiast tego można użyć łatwej poprawki , ale często istnieją lepsze rozwiązania zapewniające pierwszeństwo na inne sposoby. Oto dobra lektura o alternatywach .

w wersji kątowej 1.5.x dodawanie $scope.$apply()po zmianie stanu wykonałem zadanie u mnie tu przykładowa funkcja

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


        }