Question

我正在使用angularjs ui-router从状态转换到状态，并且每个视图都附加一个加载器。我的问题是，当从一个状态转换到另一个状态并且启动加载程序时，加载程序在引入Web服务的所有内容并完成其他获取请求之前消失。这是我第一次尝试实现angularjs的ui-router。

我试过用：

app.run(function($rootScope,$cookies){
  // fired when the transition begins.
  $rootScope.$on('$stateChangeStart',function(e, toState, toParams, fromState, fromParams){
      $rootScope.loading = true;
  });

  // fired once the state transition is complete
  $rootScope.$on('$stateChangeSuccess',function(e, toState, toParams, fromState, fromParams){
      $rootScope.loading = false;
  });
});

我也尝试过使用resolve方法：

...
.state('loan-new',{
   url: '/loan-new/:id',
   templateUrl: BASE_URL+'js/pages/loan-new.html',
   controller: 'LoanController',
   resolve: {
      loanNew: function($q, client, $stateParams, $http) {
        var defer = $q.defer();
        if(client.getAllInformation($stateParams.id) !== undefined) 
        {
          $http.get(BASE_URL+'client-loan-types').success(function(data) {

          })
          .then(function(){

            client.getAllInformation($stateParams.id).then(function(data) {
              defer.resolve(data);
              console.log('APP DATA');
              console.log(data);
            });

          });
        } 
        else 
        {
          defer.reject(data);
        }

        return defer.promise;
    }
  }
})
...

最后我尝试了下面的代码，但无济于事。

app.controller('LoadingController', ['$scope', '$http', '$rootScope', '$stateParams', 'client', '$q', function($scope, $http, $rootScope,  $stateParams, client, $q) {

  $rootScope.loading = true;

  // $scope.$on('LOAD', function(){$scope.loading = true});
  // $scope.$on('UNLOAD', function(){$scope.loading = false});

  $scope.$on('$viewContentLoading', function(event, viewConfig){
     console.log('content loading: ', event, viewConfig)
     return client.getAllInformation($stateParams.id);
  });


  $scope.$on('$viewContentLoaded', function(event) {
    $rootScope.loading = false;
    console.log('loaded loaded loaded');
  });
}]);

HTML

    <!-- CSS Loader -->
    <div id="overlay" ng-show="loading">
        <div class="sk-cube-grid">
          <div class="sk-cube sk-cube1"></div>
          <div class="sk-cube sk-cube2"></div>
          <div class="sk-cube sk-cube3"></div>
          <div class="sk-cube sk-cube4"></div>
          <div class="sk-cube sk-cube5"></div>
          <div class="sk-cube sk-cube6"></div>
          <div class="sk-cube sk-cube7"></div>
          <div class="sk-cube sk-cube8"></div>
          <div class="sk-cube sk-cube9"></div>
        </div>
        <p>Loading...</p>
    </div>

<div class="content-wrapper ng-cloak" ng-controller="LoadingController">
    <div class="container wrap-content ng-cloak" ui-view>

    </div>
</div>

服务

app.factory('client', ['$http','$q',function($http,$q){ 
    var client = {};//empty oject that will store multiple function

 ...
 //get all of the client's personal information
 client.getAllInformation = function(ucin){
      var deferred = $q.defer(); //create promise to be completed for getting a client's information
      $http.get(LOSAPI+ucin).success(function(data){
            deferred.resolve(data.data); //when success resolve the promise by accepting the data from the web serivces
      }).error(function(){
           return deferred.reject(); //promise was not completed for some reason
      });
      return deferred.promise; //return the promise
 };

    return client
}]);

 ...

对此问题的任何帮助将不胜感激。谢谢。

Answer 1

你的来电结束后你应$rootScope.loading = false。

 client.getAllInformation = function(ucin){
      var deferred = $q.defer(); //create promise to be completed for getting a client's information
      $http.get(LOSAPI+ucin).success(function(data){
            deferred.resolve(data.data); //when success resolve the promise by accepting the data from the web serivces
         $rootScope.loading = false;
      }).error(function(){
           return deferred.reject(); //promise was not completed for some reason
      });
      return deferred.promise; //return the promise
 };

在从服务angularjs检索所有数据之前，防止加载程序消失

1 个答案: