Angularjs UI路由器子模块和URL

Question

我有一个应用程序，模块查看URL。如果URL有“文档”部分之后的任何内容，则使用该URL之外的信息设置一个状态。如果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路由到子模块？

Answer 1

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