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

Question

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 every time when homeController gets loaded, It would initialise "$scope.active='tab3'"). How can I accomplish this?

halfer · Accepted Answer · 2020-06-05 13:20:22Z

1

With the help of Mikki, below is how I achieved this.

ActiveTabService:

angular.module("DemoApp")
.service('ActiveTabService', function(){
        var activeTab = 'tab3';
        return {
            getActiveTab: function(){
                return activeTab;
            },
            setActiveTab: function(tab){
                activeTab = tab;
            }
        }
});

Here is the complete demo with routing and multiple screens.

edited Jun 5, 2020 at 13:20

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Aug 28, 2016 at 9:45

kapishreshth

4,1386 gold badges30 silver badges50 bronze badges

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

Comments

Kunso Solutions · Accepted Answer · 2016-08-28 06:51:06Z

0

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

answered Aug 28, 2016 at 6:51

Kunso Solutions

7,6305 gold badges37 silver badges49 bronze badges

1 Comment

kapishreshth Over a year ago

Thanks for the idea Mikki :)

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related