Three level nested routes in 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/1234' is working

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

回答1:

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

回答2:

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

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)

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.

回答4:

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

 
       branch content goes here .....      ......   
 

did the trick for me !

文章来源: Three level nested routes in angular-ui-router