In AngularJS UI Router, data persistence when navigating from a grand-child state to a parent state is an expected behavior due to the way state inheritance works. When navigating from a child state to a parent state, the parent state is not reloaded, and the data of the parent state remains intact.

AngularJS UI Router utilizes nested state configuration, where child states inherit from parent states. As a result, when navigating from a child state to a parent state, the parent state's controller and data are not recreated or reinitialized. Instead, the same instance of the parent state's controller and data is retained, providing data persistence.

If you want to reset the data of the parent state when navigating from a child state to the parent state, you can use one of the following approaches:

  1. Using reload Option: When defining the state in your state configuration, you can use the reload option to force the parent state to reload its data when navigating back from a child state.

    javascript
    $stateProvider.state('parentState', { url: '/parent', templateUrl: 'parent.html', controller: 'ParentController', reload: true // Add this option to force reload the state });
  2. Using $state.reload() Programmatically: Inside your child state's controller, you can manually trigger a reload of the parent state using the $state.reload() method.

    javascript
    // Inside the child state's controller $state.reload('parentState');

    This will reload the parent state and reinitialize its data.

Keep in mind that forcing a reload of the parent state may have side effects, and you should carefully consider the impact on the user experience and performance before using this approach. If you need to share data between states, consider using Angular services or resolve objects to fetch fresh data when needed while keeping the state data independent.

Have questions or queries?
Get in Touch