2013-05-02 7 views
8

vado a piedi attraverso il flusso problematico ...Come faccio a mescolare i collegamenti che attivano l'aggiornamento della pagina, con Angular's html5Mode = true senza rompere il pulsante Indietro?

  • che carico google.com (solo come punto di partenza)
  • ho goto app.com
  • ho NAV a app.com/projects~~V~~singular~~1st
  • ho NAV per app.com/api/test (attraverso window.location)
  • I vedere il raw JSON (buono finora ...)
  • I press back, url cambia in app.com/projects ma continuo a vedere il JSON.
  • I press back again, url cambia in app.com ma continuo a vedere il JSON.
  • I press back again, google.com carichi.
  • premo avanti, app.com carichi bene ... tutto torna alla normalità

Cosa c'è di strano, è che ho osservato solo quando html5Mode = true in Webkit- Firefox funziona, se lo desideri ..

. . .

In primo luogo, il mio server.coffee assomiglia a questo:

app.get '/partials/:partial', routes.partials 
app.get '/api/test', api.test 
app.get '*', routes.index 

In sostanza, tutte le richieste di caricare l'indice (che bootstrap angolare), con l'eccezione per una vista/gestore parziale e un percorso di prova api che risponde con JSON non elaborato.

. . .

(sto usando il modulo per la gestione di ui-router viste annidate e interfaccia utente dichiara, che utilizza $urlRouterProvider, che è molto simile a quella di angolare $routeProvider)

In secondo luogo, il mio app.coffee assomiglia a questo:

app = angular.module('app', ['ui-router']) 
.config([ 
    '$stateProvider' 
    '$locationProvider' 
    '$urlRouterProvider' 
    ($stateProvider, $locationProvider, $urlRouterProvider)-> 
     $urlRouterProvider 
      .when('/api/test', [ 
       '$window' 
       '$location' 
       ($window, $location)-> 
        $window.location.href = '/api/test' 
      ]) 
      .otherwise('/') 
     $stateProvider 
      .state 'home', 
       url: '/' 
       templateUrl: 'partials/index' 
       controller: 'IndexCtrl' 
      .state 'projects', 
       url: '/projects' 
       templateUrl: 'partials/projects' 
       controller: 'ProjectsCtrl' 
     $locationProvider.html5Mode(true).hashPrefix '!' 
]) 

Poiché tutto è asincrono, ho dovuto usare $window per accedere window.location.href per innescare un aggiornamento della pagina in modo che il server avrebbe gestito il percorso.

Quindi la mia domanda, posso mescolare i collegamenti che attivano la pagina di aggiornamento con Angular html5Mode senza rompere il pulsante Indietro? Questo è solo un bug di Webkit e/o c'è un modo migliore per farlo?

Idealmente, avrei l'applicazione in esecuzione su Angular, ma cose come la pagina "about" o "contact" (che non hanno bisogno di essere dinamici o asincroni), verrebbero pubblicate direttamente dal server usando la pagina normale aggiorna ...

Help!

+1

Ora che ho la risposta, ho trovato una domanda duplicato: http://stackoverflow.com/questions/11580004/angular-js-link-behaviour-disable-deep-linking-for-specific-urls – jlmakes

risposta

18

due opzioni:

  1. Se stai usando <a /> tag, specificare target="_self" per far AngularJS sanno che non dovrebbe catturare i loro scatti (questi collegamenti saranno gestite dal browser normalmente). Questo non è un hack; questo è un comportamento normale documentato.
  2. Usa $window.location = 'foo' come avete fatto. È accettabile
+4

+1 per l'opzione 1, che corregge il pulsante Indietro nel webkit con 'html5Mode = true'; L'ho assolutamente perso nella documentazione, grazie Ezechiele! – jlmakes

+0

La soluzione di Victor funziona. L'impostazione di target="_self" impone il caricamento di una pagina piuttosto che il semplice instradamento. –

+0

Grazie! Mi hai sicuramente salvato la vita! –