使用$rootScope变量加载页面 - 状态更改时未设置变量

Question

我在路由器配置中设置$rootScope.pageLoading = 1，如下所示：

.state('app', {
      abstract: true,
      url: '',
      templateUrl: 'tpl/app.html',
      resolve: { 
         loading: function($rootScope){
             $rootScope.pageLoading = 1;
         }
     },
     controller: 'AppCtrl'
  })

在文档的顶层，我有一个微调器：

<!-- page loading -->
<div id="page-loading" ng-show="pageLoading">
    <small-spinner class="spinner fa-spin"></small-spinner>
</div>

当页面加载时，我取消页面控制器内的微调器，如下所示：

angular
    .module('app')
    .controller('FilesController', FilesController);
    FilesController.$inject = ['$scope', 'Bolt', '$rootScope']
    function FilesController($scope, Bolt, $rootScope){
        activate();
        function activate() {
            var contenttype = 'files';
            var order = 'title';
            var limit = 500;
            var page = 1;
            return Bolt.getRecords(contenttype, order, limit, page)
                .then(function(data){
                    $rootScope.pageLoading = 0;
                });
        }
    }

这仅在刷新页面时正常工作，即它不适用于简单的状态更改，即使所有状态都是"app"的子状态。我想要的是每当状态发生变化时，都会重置 $rootScope.pageLoading 变量。我在这里做错了什么？

Answer 1

你应该使用$stateChangeStart

 $rootScope.$on("$stateChangeStart", function(event, next, current) {
            $rootScope.pageLoading = 1;
        });

将其添加到应用控制器。现在，每次您的状态更改时，它都会将您的 pageLoading 变量重置为 1。