Przycisk Wstecz ze stanami zagnieżdżonymi w Rurce kątowej

Question

Mam aplikację AngularJS, która korzysta z nowego, opartego na stanie, ui-router. Mam trzy różne widoki w mojej aplikacji, gdzie jedna jest widokami najwyższego poziomu, a dwie pozostałe są zagnieżdżone.

Struktura zasadniczo jest następująca:

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

Router jest skonfigurowany w następujący sposób:

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

Problem polega na tym, że w zasadzie wszystko działa zgodnie z oczekiwaniami po kliknięciu wokół lub ręcznie wpisać w adresach URL, ale nie działa przy użyciu przycisków wstecz/przewijania w przeglądarce.

Np. Przejdziesz na stronę /foo, zostaniesz przeniesiony do /foo/bar, zgodnie z oczekiwaniami. Kiedy klikniesz na link, aby przejść do /foo/baz, wszystko jest w porządku. Następnie kliknij link, który przeniesie Cię do /, a wszystko będzie w porządku.

Jeśli teraz nacisnąć przycisk wstecz, jesteś z powrotem do /foo/baz (co jest poprawne), ale tylko widok /foo/fooLayout.html jest renderowany, a nie jego sub-view /foo/bazView.html. Dziwne jest teraz, że jeśli ponownie naciśniesz przycisk Wstecz, zostaniesz przeniesiony do /foo/bari będzie on poprawnie renderowany, włącznie z jego podzbiorem! Wygląda na to, że zagnieżdżone widoki nie zostały rozpoznane przy użyciu przycisku Wstecz, przynajmniej jeśli jednocześnie wprowadzisz widok abstrakcyjny.

$locationProvider.html5Mode nie jest włączona, ale włączenie to nie robi żadnej różnicy.

Używam AngularJS 1.0.5 i ui-routera 0.0.1-2013-03-20.

Jakieś pomysły, które mogą powodować ten problem i jak mogę go rozwiązać?

Answer 1

Znalazłem błąd: W widoku fooLayout.html użyłem ng-view zamiast ui-view. Raz to zmieniłem, wszystko było w porządku :-)