Zurück-Taste mit verschachtelten Zuständen in Angular Router

Question

Ich habe eine AngularJS-Anwendung, die den neuen, zustandsbasierten ui-router verwendet. Ich habe drei verschiedene Ansichten in meiner Anwendung, von denen eine eine Ansichten auf oberster Ebene und die anderen zwei geschachtelte Ansichten sind.

Die Struktur ist im Grunde wie folgt:

/ => 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 

Der Router wie folgt aufgebaut ist:

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

Das Problem ist, dass im Grunde alles funktioniert wie erwartet, wenn Sie um klicken oder manuell eingeben in URLs, aber das funktioniert nicht, wenn Sie die Zurück/Vorwärts-Tasten des Browsers verwenden.

Zum Beispiel, gehen Sie zu /foo, werden Sie wie erwartet zu /foo/bar gebracht. Wenn Sie dann auf einen Link klicken, um zu /foo/baz zu gehen, ist alles in Ordnung. Dann klicken Sie auf einen Link, der Sie zu / bringt, und alles ist noch in Ordnung.

Wenn Sie jetzt die Zurück-Taste drücken, werden Sie zurück auf /foo/baz (was korrekt ist), aber nur die /foo/fooLayout.html Ansicht wird gerendert, nicht seine Unteransicht /foo/bazView.html. Die seltsame Sache ist jetzt, dass, wenn Sie den Zurückknopf wieder schlagen, Sie zu /foo/bargenommen werden und es richtig rendert, einschließlich seine Unteransicht! Es scheint, als ob verschachtelte Ansichten bei Verwendung der Schaltfläche "Zurück" zumindest dann nicht erkannt werden, wenn Sie gleichzeitig eine abstrakte Ansicht eingeben.

$locationProvider.html5Mode ist nicht aktiviert, aber die Aktivierung macht keinen Unterschied.

Ich benutze AngularJS 1.0.5 und UI-Router 0.0.1-2013-03-20.

Irgendwelche Ideen, was dieses Problem verursachen könnte, und wie ich es lösen könnte?

Answer 1

Ich habe den Fehler gefunden: In der Ansicht fooLayout.html habe ich ng-view statt ui-view verwendet. Sobald ich das geändert habe, war alles in Ordnung :-)