angular ng-if 또는 ng-show 응답이 느립니다(2초 지연)

angular ng-if 또는 ng-show 응답이 느립니다(2초 지연)

요청이 비지일 때 버튼에 로드 표시기를 표시하거나 숨기려고 합니다.요청 로딩 중 또는 로딩 완료 시 $scope.loading 변수를 변경하여 angular를 사용합니다.

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

이것은 정상적으로 동작하지만 로드 아이콘(ion-refresh)은 $scope 변수가 즉시 갱신되는 동안 약 2초간 표시됩니다.나는 $scope를 시도했다.$125이지만, 여기에서는 문제가 없는 것 같습니다.스코프는 요청 직후에 올바르게 갱신됩니다.아이콘이 충분히 빠르게 반응하지 않습니다.

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

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

@Spock; 그래도 ngAnimate를 사용해야 하는 경우 앱 설정을 변경하지 않고 다음 CSS를 추가합니다.

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

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

보시다시피 .ng-hide-animate를 hidden으로 설정합니다.이것이 애니메이션이 완료될 때까지 기다리는 지연의 원인입니다.위의 예시와 같이 숨기지 않고 클래스 이름의 의미에 따라 숨김 이벤트에 애니메이션을 추가할 수 있습니다.

저도 같은 문제가 있어서 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이미 실행 중인 $120 국면과 경합할 수 있기 때문입니다.

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

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


        }

사용할 때도 같은 문제가 있었습니다.

<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대신 다른 방법으로 우선순위를 보장하는 더 나은 솔루션이 종종 있습니다.여기 대안에 대한 좋은 읽을거리가 있다.

Ruben의 솔루션을 사용하게 되었습니다만, 기존의 모든 케이스에 추가 클래스를 추가할 수 없기 때문에 애니메이션 없이 항상 사용하고 있는 디렉티브를 리스트 했습니다.즉각 렌더링을 기대하고 있습니다.

*[ng-hide],
*[ng-show],
*[ng-if],
*[ng-switch-when],
*[ng-switch-default] {
  transition: 0s none;
  -webkit-transition: 0s none;
  animation: 0s none;
  -webkit-animation: 0s none;
}

언급URL : https://stackoverflow.com/questions/26938021/angular-ng-if-or-ng-show-responds-slow-2second-delay