Geek Answers Handbook

Angular - UI Router - Nested Statuses - Browser Back Button does not work as expected

I have a scenario where I have the following structure of nested states:

root root.item1 root.item2

In root state there is a template showing some variables set in child states. It should also be started first, because it has logic that determines which child state will be loaded.

In case root determines that root.item2 needs to be loaded, the flow of events:

 exec root -> redirect to root.item2 -> exec root.item2

Now, if at that moment we are redirected to root.item1 and they click the "Back in browser" button, I expect it to be redirected to root.item2 , but instead it looks like the URL is just cleared and you don’t see no child state is loaded at all.

Here is an example plunger that shows the problem.

Steps to reproduce the problem in Plunker:

  • Let it load root.item2
  • Click Go to Detail 1
  • Please note that you are on root.item1
  • Click "Back Browser"
  • Please note that you are not on root.item2

Submitted by Issue to the UI Router Gihub Page. Hope some help comes from there.

Any help is appreciated.

Code that shows the problem:

 angular .module('historyApp', [ 'ui.router' ]) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('root', { url: '/', template: '<h1>Parent</h1> <div>{{vm.title}}</div> <div ui-view></div>', controller: function($scope, $state){ $scope.vm = { title: '' }; // some conditional login that determines which child state will be loaded: var variableChildState = 'root.detail2'; $state.go(variableChildState); } }) .state('root.detail1', { url: '/detail1', template: '<h1>Detail 1</h1><a ui-sref="root.detail2">Go to Detail 2</a>', controller: function($scope, $state){ $scope.vm.title = 'Set in 1'; } }) .state('root.detail2', { url: '/detail2', template: '<h1>Detail 2</h1><a ui-sref="root.detail1">Go to Detail 1</a>', controller: function($scope, $state){ $scope.vm.title = 'Set in 2'; } }) $urlRouterProvider.otherwise('/'); } ]) .run(function($rootScope, $location){ $rootScope.$on('$stateChangeStart', function (event, toState, toParams){ console.log(toState) }); }) ; 
 <!DOCTYPE html> <html ng-app="historyApp"> <head> <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> <script src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script> </head> <body> <div ui-view=""></div> </body> </html>
+5
source share
1 answer

I think this is a simple syntax solution:

 .state('root.detail1', { url: 'detail1', template: '<h1>Detail 1</h1><a ui-sref="root.detail2">Go to Detail 2</a>', controller: function($scope, $state){ $scope.vm.title = 'Set in 1'; } })

Note: url: 'detail1' instead of url: '/ detail1'

Hope this helps.

0
source

More articles:


All Articles