而孩子依赖的决心显示父状态模板 [英] Display parent state templates while child dependencies resolve

问题描述

我的应用程序有嵌套的状态和看法。父状态是抽象的，参考头模板。我想在孩子的状态来定义解决依赖关系，并有而那些依赖负载报头模板显示。目前，父状态和子状态等待孩子的依赖关系来解决。

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.

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

小提琴

请问有什么办法可以显示在父​​状态定义模板，同时在等待孩子的状态定义的依赖关系来解决？

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?

推荐答案

您可以做这在该控制器

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>

这篇关于而孩子依赖的决心显示父状态模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！