кутова ng-if або ng-show відповідає повільно (затримка 2 секунди?)

Я намагаюся показати або приховати індикатор завантаження на кнопці, коли запит зайнятий. Я роблю це з angular, змінюючи змінну $ scope.loading, коли запит завантажується або коли завантаження закінчується.

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

Це працює нормально, але піктограма завантаження (оновлення іонів) відображається приблизно протягом 2 секунд, тоді як змінна $ scope негайно оновлюється. Я спробував $ scope. $ Apply, але, схоже, це не те, що тут не так, область оновлюється чудово і відразу після запиту. Це просто значок, який реагує недостатньо швидко.

Дякую, що допомогли мені це зрозуміти!

Спробуйте видалити ngAnimate, якщо ви не використовуєте його зі сторінки конфігурації програми та сторінки index.html:

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

@Spock; якщо ви все ще потребуєте використання ngAnimate, залиште конфігурацію програми недоторканою і просто додайте наступний CSS:

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

Це приховає анімований значок відразу після того, як ваша умова буде виконана.

Як бачите, ми встановлюємо .ng-hide-animate на hidden. Саме це спричиняє затримку, оскільки вона чекає завершення анімації. Ви можете додати анімацію до своєї події приховування, як випливає з назви класу, замість того, щоб приховувати її, як у прикладі вище.

У мене була та ж проблема, і я обійшов її, використовуючи ng-class з назвою класу `` прихований '', щоб приховати елемент, замість використання ng-if або ng-show / ng-hide.

Я знайшов тут кілька рішень , але найкращим для мене було перевизначення стилю для класу .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оскільки це може суперечити вже запущеній фазі $ дайджесту.

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: flexу вашому CSS є існуючий клас DIV, властивість display може мати перевагу над display: hidden. display: none !importantНатомість можна використати просте виправлення , але часто є кращі рішення для забезпечення переваги іншими способами. Ось гарне читання про альтернативи .

в кутовій версії 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();
            }


        }