3

即使 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 广播是否应该打开微调器：

// 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但 NO 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;
}

我正在使用 angular 1.2.3 和 angular-animate 1.2.3

4

2 回答 2

2 
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 will not check for changes when using events (e.g. $on, $broadcast, $emit). $scope.apply() will check for changes manually.

于 2014-01-09T02:42:31.447 回答
0

似乎它可能是角度或角度动画本身的问题。 https://github.com/angular/angular.js/blob/master/CHANGELOG.md

我从 1.2.3 升级到 1.2.7，以前一直可重现的问题现在已经消失了。经检查 $('.loading-icon') 表明现在正确应用了 ng-hide 类。

于 2014-01-10T22:16:25.240 回答