angularjs – Angular Router中具有嵌套状态的后退按钮

我有一个AngularJS应用程序,它使用新的,基于状态的 ui-router.我的应用程序中有三个不同的视图,其中一个是顶级视图,另外两个是嵌套视图.

结构基本如下：

/ => Top-level view
/foo => Abstract view,loads a view that contains a ui-view placeholder
/foo/bar => View for the placeholder
/foo/baz => View for the placeholder

路由器设置如下：

app.config(['$urlRouterProvider','$stateProvider',function ($urlRouterProvider,$stateProvider) {
  'use strict';

  $urlRouterProvider
    .when('/bar','/foo/bar')
    .otherwise('/');

  $stateProvider
    .state('home',{
      url: '/',views: {
        '': {
          controller: 'homeController',templateUrl: '/home/homeLayout.html',},'firstHomeView@home': {
          templateUrl: '/home/firstHomeView.html'
        },'secondHomeView@home': {
          templateUrl: '/homme/secondHomeView.html'
        }
      }
    })
    .state('foo',{
      abstract: true,templateUrl: '/foo/fooLayout.html',controller: 'fooController'
    })
    .state('foo.bar',{
      url: '/foo/bar',templateUrl: '/foo/barView.html',controller: 'barController'
    })
    .state('foo.baz',{
      url: '/foo/baz',templateUrl: '/foo/bazView.html',controller: 'bazController'
    });

问题是,当你点击或手动输入网址时,基本上一切都按预期工作,但是当使用浏览器的后退/前进按钮时它不起作用.

例如,你去/ foo,你被带到/ foo / bar,正如预期的那样.当你点击链接转到/ foo / baz时,一切都很好.然后单击一个链接,将您带到/,一切都很好.

如果你现在点击后退按钮,你将被带回/ foo / baz(这是正确的),但只渲染/foo/fooLayout.html视图,而不是它的子视图/foo/bazView.html.奇怪的是,如果你再次点击后退按钮,你将被带到/ foo / bar并且它正确呈现,包括它的子视图！看起来好像在使用后退按钮时无法识别嵌套视图,至少如果您同时输入抽象视图.

$locationProvider.html5Mode未启用,但启用它没有任何区别.

我使用的是AngularJS 1.0.5和ui-router 0.0.1-2013-03-20.

什么可能导致这个问题的想法,以及我如何解决它？

解决方法

我发现错误：在视图fooLayout.html中我使用的是ng-view而不是ui-view.一旦我改变了,一切都很好:-)