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

Question

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

结构基本上如下:

/ => 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 View 被渲染，而不是它的 subview /foo/bazView.html。现在奇怪的是，如果您再次点击后退按钮，您将被带到 /foo/bar 并且它会正确呈现，包括其 subview !使用后退按钮时，似乎无法识别嵌套 View ，至少在您同时输入抽象 View 时是这样。

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

我正在使用 AngularJS 1.0.5 和 ui-router 0.0.1-2013-03-20。

有什么想法可能会导致此问题以及如何解决它吗？

Answer 1

我发现错误:在 View fooLayout.html 中，我使用 ng-view 而不是 ui-view。一旦我改变了，一切都很好:-)