Angularjs UI路由器子模塊和URL

我有一個應用程序，模塊查看URL。如果URL有「文檔」部分之後的任何內容，則使用該URL之外的信息設置一個狀態。如果URL沒有超出這一點，則設置另一個狀態。所以，這兩個網址...Angularjs UI路由器子模塊和URL

www.xyz.com/Document/

和

www.xyz.com/Document/someData

我目前解決如下問題。這有效，但我真的需要兩個國家在同一個模塊，我不知道如何做到這一點。

所以，而不是應用於app.documentEmpty的第二個狀態，我希望它適用於app.document.empty。

angular 
    .module('app.document', [ 
     'app.document.worksheet', 
     'app.document.tableOfContents', 
     'app.document.properties', 
     'app.document.bibliography', 
     'app.document.inputs', 
     'app.document.datasets', 
     'app.document.fileAsFunction', 
     'app.document.importedFunctions', 
     'app.document.directory' 
     ]) 
    .config(config); 


/** @ngInject */ 
function config($stateProvider, $translatePartialLoaderProvider, msApiProvider, msNavigationServiceProvider) 
{ 
$stateProvider.state('app.document', { 
     url  : '/Document/{path:.*}/', 
     views : { 
      '[email protected]': { 
       templateUrl: 'app/main/apps/document/worksheet/worksheet.html', 
       controller : 'DocumentController as vm' 
      } 
     }, 
     resolve : { 
      Documents: function (msApi) 
      { 
       return msApi.resolve('[email protected]'); 
      }, 
      emptyDocuments: function (msApi) 
      { 
       return msApi.resolve('[email protected]'); 
      } 
     }, 
     bodyClass: 'worksheet' 

    }).state('app.documentEmpty', { 
     url  : '/Document/', 
     views : { 
      '[email protected]': { 
       templateUrl: 'app/main/apps/document/documentEmpty.html', 
       controller : 'DocumentController as vm' 
      } 
     }, 
     resolve : { 
      Documents: function (msApi) 
      { 
       return msApi.resolve('[email protected]'); 
      }, 
      emptyDocuments: function (msApi) 
      { 
       return msApi.resolve('[email protected]'); 
      } 
     }, 
     bodyClass: 'document' 
    });

的問題是，每當我從上面取下第二狀態，並與東西像什麼目錄中的子模塊的下面替換它，該URL無法識別，不加載正確的頁面。還有其他幾個不依賴於URL的子模塊，它們工作正常。

$stateProvider.state('app.document.directory', { 
    url  : '/Document/', 
    views : { 
     '[email protected]': { 
      templateUrl: 'app/main/apps/document/directory/directory.html', 
      controller : 'DocumentController as vm' 
     } 
    }, 
    bodyClass: 'directory' 

});

是否無法通過URL路由到子模塊？

來源

2016-08-16 Joshua Foxworth

他們應該。不知道出了什麼問題，但是你完全可以在子模塊中定義你的狀態。唯一的問題是要確保你的狀態層次定義良好，你的父母沒有被破壞。日誌中的任何錯誤？ – CozyAzure

我試着在子模塊和父類中定義狀態。沒有錯誤，當子模塊被定義爲沒有任何東西的URL時，它就不起作用。 –

我想我已經設法弄清楚你的問題了。讓我在 – CozyAzure

您與state和module混淆。

ui-router中的點號表示child狀態。所以當你這樣做時：$stateProvider.state('app.document.directory',{})，視圖將只填充如果你的app.document存在，它有一個ui-view指令。除此之外，狀態對象中設置的url參數將被追加AFTER在app.document狀態中定義的url。

說了你上面的例子，您已定義的狀態是這樣的：現在

$stateProvider.state('app.document', { 
     url  : '/Document/{path:.*}/', 
     //... omitted for brevity

，這將工作：

.state('app.documentEmpty', { 
     url  : '/Document/', 
     //... omitted for brevity

因爲app.document和app.documentEmpty是兄弟狀態。

在另一方面，這將不工作：

$stateProvider.state('app.document.directory', { 
    url  : '/Document/', 
    //... omitted for brevity

因爲app.document.directory是孩子狀態app.document（子狀態由點符號定義，即.directory）

所以爲了工作，你必須重新考慮你的狀態層次。在您的app.document.directory模塊中，定義一個狀態app.documentDirectory（注意文檔後沒有點）：

angular.module("app.document.directory",[]) 
    .config('$stateProvider',function($stateProvider){ 
     $stateProvider.state('app.documentDirectory',{ //not app.document.directory, because this will make it a child state of app.document 
     url:'/directory' 
     //omitted for brevity 
     }) 
    });

來源

2016-08-17 05:18:29 CozyAzure

以下發帖回答我可以告訴，這是「答案」。 –

Angularjs UI路由器子模塊和URL

回答

相關問題