AngularJs: Nested state not displaying

Question

I am trying to implement nested states in my project but they are not working as expected.

Though View template and js calls are made and loading in the back but the screen does not change in other words nested screen does not show.

http://{domain}/#/app/store/users/1/new

Below is code snippet of my work

.state('app.store.users', {
    url: '/users/:storeid',
    params: { storeid: '1' },
    templateUrl: 'store/users',
    controller: 'UsersController',
    require: ['users', 'datatables'],
    data: {
    displayName: 'Store Users'
    }
})
.state('app.store.users.new', {
    url: '/new',
    templateUrl: 'store/newuser',
    controller: 'NewUserController',
    require: ['newuser'],
    data: {
    displayName: 'New User'
    }
})
;

http://{domain}/#/app/store/users/1/new

Considering above url, displaying Users not NewUser.

thanks in advance!!

why your url is like this /app/store/users ... ? from where comes app/store ? — ZEE
– ZEE, Commented Jul 31, 2016 at 12:48
@ZeRubeus there are two parent states above them 'app' and 'app.store' sequentially have url '/app' and 'app/store'. till /users things are working fine. — ANKIT
– ANKIT, Commented Jul 31, 2016 at 12:57

Rahul Arora · Accepted Answer · 2016-07-31 13:23:15Z

You need to include ui-view in the parent view so that, it knows that there is a child view attached to it.

Basically include

<div ui-view></div>

OR

<ui-view></ui-view>

in the partial of app.store.users state, at the place where you want to load the HTML for child state (app.store.users.new)

This is how ui-router works.

Check this plunker to understand it better: http://plnkr.co/edit/u18KQc?p=preview

EDIT:

If you want them as two separate screens they should not be in a parent-child relationship. They should be two separate states where in URL can still be nested. Just change your state names to be independent of each other.

Something like this will work:

.state('app.store.users', {
    url: '/users/:storeid',
    params: { storeid: '1' },
    templateUrl: 'store/users',
    controller: 'UsersController',
    require: ['users', 'datatables'],
    data: {
    displayName: 'Store Users'
    }
})
.state('app.store.newusers', {
    url: '/users/:storeid/new',
    params: { storeid: '1' }, //you still have to pass params to it
    templateUrl: 'store/newuser',
    controller: 'NewUserController',
    require: ['newuser'],
    data: {
    displayName: 'New User'
    }
});

Collectives™ on Stack Overflow

AngularJs: Nested state not displaying

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related