angular-ui-router - 在解决子依赖项时显示父状态模板

Question

我的应用程序有嵌套的状态和 View 。父状态是抽象和引用标题模板。我想在子状态中定义解析依赖项，并在加载这些依赖项时显示标题模板。目前父状态和子状态等待子依赖解决。

示例代码:

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

有没有什么方法可以在等待子状态中定义的依赖项解析时显示父状态中定义的模板？

Answer 1

您可以在 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;
    }
});

并且在 View 中

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