每个选项卡中同一控制器的不同实例的粘性状态：Angularjs UI 路由器

Question

我正在 angularjs 中设计一个基于表格结构的 cms，其中可以在选项卡中打开和编辑多篇文章。我正在为文章使用 articleController。对于每篇文章 url 参数（主要是文章 id）是不同的。

我正在尝试使这些标签具有粘性。

以下是我写的代码：路线：

$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
            });

主控：-

 $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>

仪表板控制器

//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'
                        }
                    );
                }
            };

因此用户可以添加新标签以从标签编辑不同的文章。

当标签页中有超过一篇文章时，在将标签页从一篇文章切换到另一篇文章时，粘滞状态无法正常工作，因为它们使用的是同一个控制器。有什么建议么？

Answer 1

最后我得出了摆脱 UI 路由器、粘滞状态并使用 ngshow 和 nghide 自行开发此功能的结论。它工作得很好。

所用代码的详细说明见：

Caching URL view/state with parameters

每个选项卡中同一控制器的不同实例的粘性状态：Angularjs UI 路由器

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

angularjs

angularjs-directive

angular-ui-router

angular-ui-router-extras