Three level nested routes in angular-ui-router

Question

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

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

Answer 1

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

Answer 2

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

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

Answer 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)

We forward them one by one.

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

Then in detailsController

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

Then in the 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.

Answer 4

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

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

 </div>

did the trick for me !