angular-ui-router中的三级嵌套路由

Im trying to get my nested route working but it's giving me hard time for two days now :(

我试图让我的嵌套路线工作，但现在给我两天的艰难时间:(

one level works fine

一级工作正常

two levels works fine

两个级别工作正常

three levels is not working!

三个级别不起作用！

can anybody please help me out?

任何人都可以帮帮我吗？

Thanks in advance

提前致谢

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' is working

'/ settings'正在运行

'/settings/1234' is working

'/ settings / 1234'正在运行

'/settings/1234/prop' is not working, always return the prevues state 'Branch'

'/ settings / 1234 / prop'不起作用，总是返回普遍状态'分支'

4 个解决方案

#1

I guess you didn't declare an ui-view in the Branch template

我猜你没有在Branch模板中声明一个ui-view

#2

I had the same issue. For settings.branch.prop, try setting url to:

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

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

#3

WE got a similar problem. Just found a solution (not very pretty thought)

我们遇到了类似的问题。刚刚找到了解决方案（不是很认真）

So we have

所以我们有

/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.

So how did we forward from /b2c/applicationShow to /b2c/applicationShow/9238490392084/details/someApp/someTab (there is a table that list all the app, and click a link suppose to bring you all the way to that particular tab)

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

We forward them one by one.

我们一个接一个地转发它们。

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

Then in detailsController

然后在detailsController中

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

Then in the someAppController

然后在someAppController中

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

Basically the state machine will take the last path, append then continue. Well, like I said, it wasn't pretty but got the job done. Hope it helps.

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

#4

Try wrapping a div with attribute ui-view around the branch views content like so,

尝试使用属性ui-view围绕分支视图内容包装div，如下所示，

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

 </div>

did the trick for me !

为我做了诀窍！

#1