angular ng-if 또는 ng-show가 느리게 응답합니다 (2 초 지연?)

요청이 바쁠 때 버튼에 로딩 표시기를 표시하거나 숨기려고합니다. 요청이로드되거나로드가 완료 될 때 $ 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를 시도했지만 여기에서 잘못된 것 같지는 않지만 범위는 요청 직후에 잘 업데이트됩니다. 빠르게 반응하지 않는 아이콘 일뿐입니다.

이해하도록 도와 주셔서 감사합니다!

앱 구성 및 index.html 페이지에서 사용하지 않는 경우 ngAnimate를 제거해보십시오 .

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

@Spock; 여전히 ngAnimate를 사용해야하는 경우 앱 구성을 그대로두고 다음 CSS를 추가하면됩니다.

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

조건이 충족 된 직후에 애니메이션 아이콘이 숨겨집니다.

보시다시피 .ng-hide-animate를 숨김으로 설정합니다. 이것이 애니메이션이 완료 될 때까지 대기하는 지연의 원인입니다. 위의 예 에서처럼 숨기는 대신 클래스 이름이 암시하는 것처럼 숨기기 이벤트에 애니메이션을 추가 할 수 있습니다.

나는 같은 문제가 있었고 ng-if 또는 ng-show / ng-hide를 사용하는 대신 '숨겨진'클래스 이름과 함께 ng-class를 사용하여 요소를 숨기는 방식으로 해결했습니다.

여기 에서 몇 가지 해결책을 찾았 지만 저에게 가장 좋은 방법은 .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이미 실행중인 $ digest 단계와 충돌 할 수 있으므로 사용하지 마십시오 .

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: flexDIV의 기존 클래스에 대한 CSS 가 있는 경우 해당 표시 속성이 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();
            }


        }