KungFu_Zebra KungFu_Zebra - 1 month ago 5x
AngularJS Question

Angularjs: Restore active tab on screen-1 when navigating back from screen-2

I have a screen-1('home' screen) which has three tabs (say tab1, tab2, and tab3). When app launches, the 'tab3' is active (in homeController.js I have set "$scope.active='tab3'"). Now when I open 'tab1' (So 'active' class updated to 'tab1') and redirects from this 'tab1' to another screen-2 ($location.path('/pathToScreen2') using routing), the screen-2 launches which has a back button, onclick of back button (($location.path('/pathToScreen1')), It navigates back to screen-1.

Now when screen-1 is launched, the active tab is 'tab3' rather I want 'tab1' should be active (probably everytime when homeController gets loaded, It would initialise "$scope.active='tab3'"). How can I accomplish this?

Please help. Thanks!


You should not save states inside controllers variables, because controller has it's own lifecycle of destroying with all it's defined variables.

So what you need here - is create some kind of state service and initialize there your active tab. Inject this service across all controllers related to tab functionality, and set to this state service active tab once user entered to some controller.

P.S. Services are singletons, so if you inject service to few controllers they will all have links to the same object and it will not be destroyed before you will do it manually