angular-ui-router 中的三层嵌套路由答案

【问题标题】：Three level nested routes in angular-ui-routerangular-ui-router 中的三层嵌套路由
【发布时间】：2016-12-03 23:43:34
【问题描述】：

我试图让我的嵌套路线工作，但现在这两天让我很难过:(

一级工作正常

两个级别都可以正常工作

三级无效！

谁能帮帮我？

提前致谢

angular.module('settings', []).config(['$stateProvider', '$routeProvider', '$urlRouterProvider', function($stateProvider, $routeProvider, $urlRouterProvider) {
    $stateProvider
        .state('settings', {
            url: '/settings',
           template:"Settings",
            controller: function(){
                console.log('settings');
            }
        }).
        state('settings.branch', {
            url: '/{branchId:[0-9]{1,8}}',
            template:"Branch",
            controller: function(){
                console.log('branch');
            }
        }).
        state('settings.branch.prop', {
            url: '/prop',
            template:"Property",
            controller: function(){
                console.log('property');
            }
        });
}]);

'/settings' 正在工作

'/settings/1234' 正在工作

'/settings/1234/prop' 不起作用，总是返回 prevues 状态'Branch'

【问题讨论】：

你有 jsfiddle/plunker 吗？
+1 需要小提琴/plunker。 uirouter 依赖在哪里？ var myapp = angular.module('myapp', ["ui.router"])?????

标签： angularjs angular-ui

【解决方案1】：

我猜你没有在分支模板中声明 ui-view

【讨论】：

【解决方案2】：

我遇到了同样的问题。对于settings.branch.prop，尝试将url 设置为：

url: '/{branchId:[0-9]{1,8}}/prop'

【讨论】：

【解决方案3】：

我们遇到了类似的问题。刚刚找到一个解决方案（不是很漂亮）

所以我们有

/b2c/applicationShow --> applicationShowController (b2c.applicationShow) with an /:id 

/b2c/applicationShow/9238490392084/details --> detailsController (b2c.applicationShow.details) 

/b2c/applicationShow/9238490392084/details/someApp --> someAppController (b2c.applicationShow.details.someApp) 

/b2c/applicationShow/9238490392084/details/someApp/someTab --> this has no controller, only declare the previous one as parent.

那么我们如何从 /b2c/applicationShow 转发到 /b2c/applicationShow/9238490392084/details/someApp/someTab（有一个表格列出了所有应用程序，然后单击一个链接假设您会一直到该特定选项卡）

我们一一转发。

$state.go(b2c.applicationShow , {id: 9238490392084})

然后在 detailsController

$state.go(b2c.applicationShow.details.someApp);

然后在 someAppController 中

$stage.go(b2c.applicationShow.details.someApp, {tab: someTab});

基本上状态机将采用最后一条路径，追加然后继续。好吧，就像我说的那样，它并不漂亮，但完成了工作。希望能帮助到你。

【讨论】：

【解决方案4】：

尝试像这样在分支视图内容周围包裹一个带有 ui-view 属性的 div，

 <div ui-view> 
     branch content goes here .....
     ......

 </div>

帮我搞定了！

【讨论】：