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

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/

나는 당신을 돕길 바랍니다.

---

I was facing a similar issue, I used $scope.$evalAsync() to force update the binding.

It works like a charm.

Avoid using $scope.$apply as it can conflict with an already-running $digest phase.

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

---

in angular version 1.5.x adding $scope.$apply() after the change in the condition done the job for me here is an example function

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


        }

---

I had the same issue when using

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

In my case I solved it by adding a class:

.hidden {
  display: none;
}

and then adding the class conditionally instead of using *ngIf:

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

If always using it this way, I would consider renaming shouldShow to shouldHide (and negate the logic that assigns it), so it can be used as shouldHide instead of !shouldShow.

If you have display: flex in your CSS for the DIV's existing class, that display property might take precedence over the display: hidden. An easy fix can be to use display: none !important instead, but there are often better solutions to ensure precedence in other ways. Here is a good read about alternatives.

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