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

时间:2015-01-23 09:17:08

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

我在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>

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

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

当标签粘贴状态多于一篇时,问题在将标签从一篇文章切换到另一篇文章时不起作用,因为它们使用相同的控制器。有什么建议?

1 个答案:

答案 0 :(得分:0)

最后,我得出结论,摆脱UI路由器,粘性状态,并使用ngshow和nghide自己开发此功能。它运作得非常好。

所用代码的详细说明见:

Caching URL view/state with parameters