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 i

Answer 1

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

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 !