angular 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 как скрытый. Это то, что вызывает задержку при ожидании завершения анимации. Вы можете добавить анимацию к вашему событию скрытия, как следует из названия класса, вместо того, чтобы скрывать ее, как в примере выше.

У меня была такая же проблема, и я решил ее обойти, используя 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: flexCSS для существующего класса DIV, это свойство display может иметь приоритет над display: hidden. display: none !importantВместо этого можно использовать простое исправление , но часто есть более эффективные решения для обеспечения приоритета другими способами. Вот хорошее чтение об альтернативах .

в angular версии 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();
            }


        }