6

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

结构基本如下：

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

问题是，当您单击或手动输入 url 时，基本上一切都按预期工作，但在使用浏览器的后退/前进按钮时它不起作用。

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

If you now hit the back button, you are taken back to /foo/baz (which is correct), but only the /foo/fooLayout.html view is rendered, not its sub-view /foo/bazView.html. The strange thing is now that if you hit the back button again, you are taken to /foo/bar and it renders correctly, including its subview! It seems as if nested views weren't recognized when using the back button, at least, if you enter an abstract view at the same time.

$locationProvider.html5Mode is not enabled, but enabling it doesn't make any difference.

I am using AngularJS 1.0.5 and ui-router 0.0.1-2013-03-20.

Any ideas what might cause this issue, and how I might solve it?

4

1 回答 1

4

I found the error: In the view fooLayout.html I was using ng-view instead of ui-view. Once I changed that, everything was fine :-)

于 2013-04-01T12:05:23.717 回答