angularjs ui-router parent state with parameter loads after child state

Question

I have a parent and a child state. The parent state is used to View/Edit customers, the child state is to create. Without a parameter on the parent state, they both load fine:

.state('crm.customer', {
    url: 'crm/customers/',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})
.state('crm.customer.create', {
    url: 'crm/customers/create',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})

When I add the customerId parameter to the parent state, and I load the child state, first the child state loads, and then immediately it switches to the parent state:

.state('crm.customer', {
    url: 'crm/customers/:customerId',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})
.state('crm.customer.create', {
    url: 'crm/customers/create',
    templateUrl: 'src/modules/crm/views/customer.html',
    controller: 'customersController'
})

How can I prevent the parent state from loading after the child state loads?

This happens because both your paths match when you access the /crm/customers/create path. In this case, the :customerId takes the value of create. try url: 'crm/customers/{customerId:int}' instead of url: 'crm/customers/:customerId' — iulian
– iulian, Commented May 5, 2016 at 13:35
@iulian Nice, thanks! :D Add this as an answer so I can accept it! — orszaczky
– orszaczky, Commented May 5, 2016 at 13:43

iulian · Accepted Answer · 2016-05-05 13:50:25Z

1

This happens because when you access /crm/customers/create, both state urls matches. In order to solve this problem, define the type of the param. According to the documentation, there are several ways to define the params within a url, one of which is using curly braces: '/user/{id:int}'.

In your case, use

.state('crm.customer', {
  url: 'crm/customers/{customerId:int}',
  templateUrl: 'src/modules/crm/views/customer.html',
  controller: 'customersController'
})

so that /crm/customers/create will match only the child's state.

answered May 5, 2016 at 13:50

iulian

5,8523 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs ui-router parent state with parameter loads after child state

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