Pulsante Indietro con stati nidificati in Angular Router

Question

Possiedo un'applicazione AngularJS che utilizza il nuovo stato basato su stato ui-router. Ho tre diverse visualizzazioni nella mia applicazione, in cui una è una vista di primo livello e le altre due sono nidificate.

La struttura fondamentalmente è la seguente:

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

Il router è configurato come segue:

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

Il problema è, che in fondo tutto funziona come previsto quando si fa clic in giro o digitare manualmente in urls, ma che non funziona quando si utilizzano i pulsanti Indietro/Avanti del browser.

E.g., vai a /foo, sei portato a /foo/bar, come previsto. Quando si fa clic su un collegamento per andare a /foo/baz, tutto è a posto. Quindi fare clic su un collegamento che porta a / e tutto è ancora valido.

Se ora si preme il pulsante di nuovo, si ritorna al /foo/baz (che è corretto), ma solo la vista /foo/fooLayout.html è reso, non il suo sub-view /foo/bazView.html. La cosa strana ora è che se premi di nuovo il pulsante Indietro, sei portato a /foo/bare lo rende correttamente, inclusa la sottoview! Sembra che se le viste nidificate non vengano riconosciute quando si utilizza il pulsante Indietro, almeno, se si immette una vista astratta allo stesso tempo.

$locationProvider.html5Mode non è abilitato, ma l'attivazione non fa alcuna differenza.

Sto utilizzando AngularJS 1.0.5 e ui-router 0.0.1-2013-03-20.

Qualche idea su cosa potrebbe causare questo problema e su come potrei risolverlo?

Answer 1

Ho trovato l'errore: nella vista fooLayout.html stavo usando ng-view invece di ui-view. Una volta cambiato, tutto andava bene :-)