顯示父狀態模板，同時子依賴關係解決

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

Fiddle

有什麼辦法來顯示父狀態定義在等待孩子的狀態定義爲解決依賴性的模板？

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>