Sticky states with different instance of same controller in each tab: Angularjs UI router

Question

I am designing a tabular structure based cms in angularjs in which multiple articles can be opened and edited in tabs. I am using articleController for articles. For each article url parameters( mainly article id) are different.

I and trying to make these tabs sticky.

Following is the code I have written: Routes:

$urlRouterProvider.otherwise('/');
            $urlRouterProvider.deferIntercept();
            $stickyStateProvider.enableDebug(true);

            //States definition for tabbed routes
            $stateProvider.state('main', {
                url:         '/?ssoToken',
                templateUrl: 'main.html',
                controller: 'MainController',
                abstract:true
            }).state('main.dashboard', {
                url:         'dashboard',
                views: { 'dashboard@cmslite': { controller: 'DashboardController', templateUrl: 'dashboard.html'}},
                sticky: true
            }).state('main.article', {
                url:         'article?id',
                views: { 'article@cmslite': { controller: 'ArticleController', templateUrl: 'article_partial.html'}},
                sticky: true
            });

Maincontroller:-

 $scope.tabData   = [
                        {
                            heading: 'Dashboard',
                            route:   'cmslite.dashboard',
                            params:$scope.$routeParams,
                            view:'dashboard'
                        },
                        {
                            heading: 'Article',
                            route:   'cmslite.article',
                            params:$scope.$routeParams,
                            view:'article'
                        }
                    ];
$scope.matchTabStates=function(tab){
                        if($state.includes(tab.route)){
                            if(Utils.arraysEqual(tab.params,$scope.$routeParams)){
                                return true;
                            }
                        }
                        return false;
                    };

main.html

<div ng-repeat="tab in tabData" ui-view="{{tab.view}}" ng-show="matchTabStates(tab)"></div>

DashboardController

//To add articles in tabs dynamically
$scope.editArticle = function(id,title){
                var reqParam = {id: id, ssoToken: MainProperties.ssoToken};
                if(id!=null && id!="") {
                    $scope.$parent.tabData.push({
                            heading: 'Article: ' + title,
                            route: 'cmslite.article',
                            params: reqParam,
                            view:'article'
                        }
                    );
                }
            };

So user can add new tab for editing different articles from tabs.

Problem in when there are more then one article in tabs sticky state doesn't work while switching tabs from one article to another because they are using the same controller. Any suggestions?

If you are using multiple instances of a controller, it's best to use the `controllerAs` syntax. — Martin, Jan 23 '15 at 09:22
But it doesnt solve sticky state problem. It still reloads the controller in case of tab change. — pankaj, Jan 23 '15 at 10:23
ui-router-extras guy here. Unfortunately, I don't have a way for you to have the same state active multiple times with different params. — Chris T, Jan 23 '15 at 23:04
@Artem:- Yes solution is to get rid of ui router and develop this feature yourself using ngshow . See this link- http://stackoverflow.com/questions/26591335/caching-url-view-state-with-parameters — pankaj, Feb 02 '15 at 09:36

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

Finally I came to conclusion of get rid of UI router, sticky states and develop this feature by myself using ngshow and nghide. It works perfectly well.

Detail explanation of code used is given at:

Caching URL view/state with parameters

edited May 23 '17 at 11:50

Community

1
1

answered Feb 02 '15 at 09:39

pankaj

474
5
15

Sticky states with different instance of same controller in each tab: Angularjs UI router

1 Answers1