angular-ui-router嵌套狀態「沒有這樣的狀態」父母

Question

我遇到了一個問題，設置嵌套視圖的狀態。

下面是我的測試模板的相關部分，它正在我的index.html中加載到'main'ui視圖中。

<div class="row-fluid"> 
<div class="col-lg-3"> 
    <ul class="nav nav-list"> 
     <li class="nav-header">Header 1</li> 
     <li class="active"><a href="#/test/page1">Page 1</a></li> 
     <li><a href="#/test/page2">Page 2</a></li> 
     <li class="nav-header">Header 2</li> 
     <li><a href="#/test/page3">Page 3</a></li> 
    </ul> 
</div> 
<div class="col-lg-9"> 
    <div class="container" ui-view="testcontent"></div> 
</div> 

下面是我的測試模塊的JS。

angular.module('test', [ 
    'ui.state', 
    'ui.bootstrap', 
    'test.page1', 
    'test.page2', 
    'test.page3' 
]) 

.config(function config($stateProvider) { 
    $stateProvider.state('test', { 
     url: '/test', 
     templateUrl: 'test/test.tpl.html', 
     views: { 
      "main": { 
       controller: 'TestCtrl', 
       templateUrl: 'test/test.tpl.html' 
      } 
     }, 
     data:{ pageTitle: 'Test' } 
    }) 
    .state('test.page1', { 
     url: '/page1', 
     views: { 
      "testcontent@test": { 
       controller: 'Test1Ctrl', 
       templateUrl: 'test/page1/page1.tpl.html' 
      } 
     }, 
     data:{ pageTitle: 'Test Page 1' } 
    }) 
    .state('test.page2', { 
     url: '/page2', 
     views: { 
      "testcontent@test": { 
       controller: 'Test2Ctrl', 
       templateUrl: 'test/page2/page2.tpl.html' 
      } 
     }, 
     data:{ pageTitle: 'Test Page 2' } 
    }) 
    //.state('test.page3', { 
    // url: '/page3', 
    // views: { 
    //  "testcontent@test": { 
    //   controller: 'Test3Ctrl', 
    //   templateUrl: 'test/page3/page3.tpl.html' 
    //  } 
    // }, 
    // data:{ pageTitle: 'Test Page 3' } 
    //}) 
    ; 
}) // Module configuration 

.controller('TestCtrl', function TestCtrl($scope) { 

}); 

這工作正常，如果在父母的模塊的配置設置狀態的配置。

我想要做的是在模塊的配置部分設置狀態，而不是在父級。

angular.module('test.page3', [ 
    'ui.state', 
    'ui.bootstrap', 
    'test' 
]) 

.config(function config($stateProvider) { 
    $stateProvider.state('test.page3', { 
     url: '/page3', 
     views: { 
      "testcontent@test": { 
       controller: 'Test3Ctrl', 
       templateUrl: 'test/page3/page3.tpl.html' 
      } 
     }, 
     data:{ pageTitle: 'Test Page 3' } 
    }); 
}) // Module configuration 

.controller('Test3Ctrl', function Test3Ctrl($scope) { 

}); 

如果我嘗試AppCtrl toBeTruthy這個然後我一般測試一個錯誤炸燬「未能實例模塊test.page3因：沒有這樣的狀態測試」。

有沒有辦法做到這一點，或者我堅持鏈接在測試模塊中的所有.state（）調用？

Answer 1

首先，你有一個問題：循環模塊依賴。 test取決於test.page3，其取決於test。

然後，使用父模塊的父狀態的模塊應該依賴於它。

有以下模塊聲明：

angular.module('test', [ 
    'ui.state', 
    'ui.bootstrap' 
]); 

和

angular.module('test.page3', [ 
    'test' 
]); 

而且你$stateProvider配置將正常工作。

您應該最終能夠爲其他頁面提供相同的依賴關係結構。