在解决子依赖项时显示父状态模板 [英] Display parent state templates while child dependencies resolve

问题描述

我的应用有嵌套的状态和视图.父状态是抽象和参考标题模板.我想在子状态中定义解析依赖项，并在加载这些依赖项时显示标题模板.当前父状态和子状态等待子依赖解析.

示例代码:

angular.module("Test", ["ui.router"]).config(function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise("/sec1");$stateProvider.state("sec1", {摘要:真实，网址:/sec1"，模板:
标题1
正在加载...
"}).state("sec1.page", {网址:"",模板:<h1>Section 1 Page</h1><a ui-sref='sec2.page'>Goto 2</a>"，解决: {延迟:函数($超时){返回 $timeout(function() {}, 1000);}}}).state("sec2", {摘要:真实，网址:/sec2"，模板:
标题2
正在加载...
"}).state("sec2.page", {网址:"",模板:<h1>Section 2 Page</h1><a ui-sref='sec1.page'>Goto 1</a>"，解决: {延迟:函数($超时){返回 $timeout(function() {}, 1000);}}});});

小提琴

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

解决方案

你可以在控制器中做到这一点

app.controller('testctrl', function($rootScope) {$scope.loading = true;$scope.loadstuff = function() {for (var i = 1; i <100; i++) {//加载缓慢的东西}$scope.loading = false;}});

在视图中

<div ng-show="loading">加载中...</div><div ng-hide="loading" ng-init="loadstuff">加载的内容</div>

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?

解决方案

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>

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