ng-show指令的計算結果爲false後，爲什麼不添加ng-hide類？

Question

即使ng-show計算結果爲false，我們的加載圖標（spinner）仍然可見。

這裏的指令：

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：

// 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); 
    }, 

從輸出的console.log和window.requestCount ，邏輯是正確的。大部分情況下，這是有效的。但有時（可能是競賽狀態？），加載圖標仍然存在於類ng-hide-add ng-animate-active ng-hide-add-active，但是沒有ng-hide。我認爲如果ng-show錯誤，它應該添加一個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 
}); 

AngularJS使用事件（如$on時不會更改支票，$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類現在已經被正確應用。