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

只有在页面刷新时才能正常工作，即即使所有状态都是“应用程序”的子状态，它也不会对简单的状态更改起作用。我想要的是每当状态发生变化时都会重置$ rootScope.pageLoading变量。我在这里做错了什么？

Answer 1

你应该使用 $ stateChangeStart

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

将此添加到您的应用控制器。现在，每当状态发生变化时，它都会将pageLoading变量重置为1。

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

1 个答案: