在子依赖关系解析时显示父状态模板

Question

我的应用程序嵌套了状态和视图.父状态是抽象和引用标头模板.我想在子状态中定义解析依赖项,并在这些依赖项加载时显示标题模板.目前,父状态和子状态等待子依赖关系解析.

示例代码:

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

小提琴

有没有办法在等待子状态中定义的依赖关系解析时显示父状态中定义的模板？

Answer 1

您可以在控制器中执行此操作

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

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

并在视图中

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