Display parent state templates while child depende

问题:

My app has nested states and views. Parent states are abstract and reference header templates. I would like to define resolve dependencies in the child states and have the header templates display while those dependencies load. Currently the parent state and child state wait for the child dependencies to resolve.

Example code:

angular.module("Test", ["ui.router"])
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/sec1");
    $stateProvider.state("sec1", {
        abstract: true,
        url: "/sec1",
        template: "<h1>Header 1</h1><div ui-view>Loading...</div>"
    })
    .state("sec1.page", {
        url: "", 
        template: "<h1>Section 1 Page</h1><a ui-sref='sec2.page'>Goto 2</a>",
        resolve: {
            delay: function($timeout) {
                return $timeout(function() {}, 1000);
            }
        }
    })
    .state("sec2", {
        abstract: true,
        url: "/sec2", 
        template: "<h1>Header 2</h1><div ui-view>Loading...</div>"
    })
    .state("sec2.page", {
        url: "", 
        template: "<h1>Section 2 Page</h1><a ui-sref='sec1.page'>Goto 1</a>",
        resolve: {
            delay: function($timeout) {
                return $timeout(function() {}, 1000);
            }
        }
    });
});

Fiddle

Is there any way to display the template defined in the parent state while waiting for the dependencies defined in the child state to resolve?

回答1:

You can just do this in the controller

app.controller('testctrl', function($rootScope) {
  $scope.loading = true;

  $scope.loadstuff = function() {
       for (var i = 1; i < 100; i++) {
            //load slow stuff
       }
       $scope.loading = false;
    }
});

and in the view

<div ng-show="loading">Loading...</div>
<div ng-hide="loading" ng-init="loadstuff">content loaded</div>