当我仅使用ui-router查看父状态时,如何自动转到上次选择的子状态?

时间:2013-09-22 15:40:04

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

我有以下设置:

   var admin = {
        name: 'admin',
        url: '/admin',
        views: {
            'menu': {
                templateUrl: '/Content/app/admin/partials/menu.html',
            },
            'content': {
                templateUrl: function (stateParams) {
                    var content = localStorage.getItem('ls.adminPage');
                    if (content != null && content != "") {
                        return '/Content/app/admin/partials/' + content + '.html';
                    }  else {
                        return '/Content/app/common/partials/empty.html';
                    }
                }
            }
        }
    };

    var adminContent = {
        name: 'admin.content',
        parent: 'admin',
        url: '/:content',
        views: {
            'content@': {
                templateUrl: function (stateParams) {
                    localStorage.setItem('ls.adminPage', stateParams.content);
                    return '/Content/app/admin/partials/' + stateParams.content + '.html';
                },
            }
        }
    }

当用户之前访问/admin/xxx页面时,下次/admin被选中时,会再次返回/admin/xxx页面。

然而在视觉上这是一团糟,因为浏览器URL显示为/admin且状态未正确设置。

我是否可以通过某种方式存储子状态然后将其存储,以便当用户浏览父级时它将转换到上一个已知的子状态并在浏览器中显示该URL?

1 个答案:

答案 0 :(得分:4)

这样做:

myapp.config(function($urlRouterProvider){

  $urlRouterProvider.when('/admin', function() {
    var content = localStorage.getItem('ls.adminpage');
    if ( content != null && content != "" ) {
      return "/admin/" + content;
    }
    else {
      return false;
    }
  });

});

请参阅此plunkr:http://plnkr.co/edit/oEXZpO

编辑:两个月后重新审视这个答案我意识到它有点简短(至少可以说)解释:所以这实际上会将请求“重定向”到最后选择的管理页面,以便它显示在URL。我更新了Plunkr并添加了一个显示当前文档URL的函数。所以可以看到,点击/ admin /后,如果这是之前访问过的管理员子页面,则URL实际上是/ admin / 12345。