ng-show 지시문이 false로 평가 된 후 ng-hide 클래스가 추가되지 않는 이유는 무엇입니까?

Question

ng-show가 false로 평가 되더라도로드 아이콘 (회 전자)이 표시되는 경우가 있습니다. 여기

는 지침입니다 :

angular.module("app.directives").directive("loadingIcon", function() { 
return { 
    restrict: "A", 
    replace: true, 
    link: function (scope, element) { 

     scope.showLoader = false; 

     scope.$on('event:httpRequestStarted', function() { 
     // got the request start notification, show the element 
     scope.showLoader = true; 
     }); 

     scope.$on('event:httpRequestsCompleted', function() { 
     // got the request completed notification, hide the element 
     scope.showLoader = false; 

     }); 
    }, 
    template: "<div ng-show='showLoader' class='fade-in-out loading-icon spin-fx ng-hide' ng-cloak></div>" 
    } 
}); 

여기에 회가 아닌지해야하는 경우 브로드 캐스팅 httpInterceptor 경우 : CONSOLE.LOG 출력에서 ​​

// interceptor to show loading icon 
$httpProvider.interceptors.push(['$q','$rootScope', function($q, $rootScope) { 
    window.requestCount = 0; 

    return { 
    request: function(config) { 

     window.requestCount += 1; 
     console.log('start request', config, window.requestCount) 
     $rootScope.$broadcast('event:httpRequestStarted'); 
     return config || $q.when(config); 
    }, 

    response: function(response) { 

     $rootScope.$broadcast('event:httpRequestSuccess', response); 
     window.requestCount -= 1; 
     console.log('got response', response, window.requestCount) 
     if ((window.requestCount) === 0) { 
     console.log('stop spinny') 
     $rootScope.$broadcast('event:httpRequestsCompleted'); 
     } 
     return response || $q.when(response); 
    }, 

및 window.requestCount , 논리가 맞습니다. 그리고 대부분이 작동합니다. 하지만 때로는 (경쟁 조건이있을 수 있습니다.) 로딩 아이콘은 클래스 ng-hide-add ng-animate-active ng-hide-add-active으로 유지되지만 번호는 ng-hide입니다. ng-show가 false이면 ng-hide 클래스를 추가해야한다고 생각했습니다.

누구든지 경쟁 조건이 어떤 것인지 밝힐 수 있습니까?

편집 :

예, ngAnimate 모듈이 우리의 응용 프로그램에 포함되어 있습니다. 여기 로딩 아이콘 CSS입니다 :

.loading-icon { 
    background-image: url("/images/loading-icon.png"); 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    width: 40px; 
    height: 40px; 
    z-index: 100000; 
    position: fixed; 
    right: 50%; 
    top: 50%; 
    margin: -20px 0 0 -20px; 
} 

.spin-fx { 
    -moz-animation: spin-fx 2s infinite linear; 
    -o-animation: spin-fx 2s infinite linear; 
    -webkit-animation: spin-fx 2s infinite linear; 
    animation: spin-fx 2s infinite linear; 
} 

// loading icon 
.fade-in-out { 
    transition:linear 1s; 
} 

.fade-in-out.ng-enter { 
    opacity:0; 
} 

.fade-in-out.ng-enter-active { 
    opacity:1; 
} 

.fade-in-out.ng-leave { 
    opacity:1; 
} 

.fade-in-out.ng-leave-active { 
    opacity:0; 
} 

내가 각도 1.2.3 및 각-애니메이션을 사용하고 1.2.3

Answer 1

scope.$on('event:httpRequestStarted', function() { 
    scope.showLoader = true; 
    scope.$apply(); // Apply changes 
}); 

scope.$on('event:httpRequestsCompleted', function() { 
    scope.showLoader = false; 
    scope.$apply(); // Apply changes 
}); 

(예 $on을 이벤트를 사용할 때 변경 내용을 확인하지 않습니다

AngularJS와, $broadcast , $emit). $scope.apply()은 수동으로 변경 사항을 확인합니다.

Answer 2

보이는 것 은 각도 또는 각진 애니메이션 자체에 문제가있었습니다. https://github.com/angular/angular.js/blob/master/CHANGELOG.md

1.2.3에서 1.2.7로 업그레이드되었으며 이전에 일관되게 재현성있는 문제점이 사라졌습니다. $ ('. loading-icon')을 검사하면 ng-hide 클래스가 올바르게 적용되었음을 알 수 있습니다.