在每个选项卡中具有相同控制器的不同实例的粘性状态：Angularjs UI 路由器答案

【问题标题】：Sticky states with different instance of same controller in each tab: Angularjs UI router在每个选项卡中具有相同控制器的不同实例的粘性状态：Angularjs UI 路由器
【发布时间】：2025-12-12 12:10:02
【问题描述】：

我正在 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'
                        }
                    );
                }
            };

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

当标签从一篇文章切换到另一篇文章时，如果有超过一篇文章处于标签粘性状态，则该问题不起作用，因为它们使用的是相同的控制器。有什么建议么？

【问题讨论】：

如果您使用多个控制器实例，最好使用controllerAs 语法。
但它不能解决粘性状态问题。如果选项卡更改，它仍然会重新加载控制器。
ui-router-extras 的家伙在这里。不幸的是，我没有办法让您使用不同的参数多次激活相同的状态。
@chris：无论如何你可以建议实现这一目标？
需要解决类似的任务.. 任何结果，@pankai？

标签： angularjs angularjs-directive angular-ui-router angular-ui-router-extras

【解决方案1】：

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

所用代码的详细解释见：

Caching URL view/state with parameters

【讨论】：