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'

+1 on need for fiddle/plunker. Where is the uirouter dependency? var myapp = angular.module('myapp', ["ui.router"])????? — scalaGirl, Dec 31 '13 at 17:31

score 13 · Answer 1 · answered May 29 '13 at 20:02

13

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

answered May 29 '13 at 20:02

Florian F

8,822
4
37
50

score 1 · Answer 2 · answered Jul 18 '13 at 13:05

1

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

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

answered Jul 18 '13 at 13:05

piotr.d

2,636
2
23
21

score 0 · Answer 3 · answered Oct 21 '14 at 14:34

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.

score 0 · Answer 4 · answered Dec 03 '16 at 15:43

0

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 !

answered Dec 03 '16 at 15:43

Edwin O.

4,998
41
44

Three level nested routes in angular-ui-router

4 Answers4

Linked