Aggiornamento del tag del titolo utilizzando AngularJS e UI-Router

Si è verificato un problema strano durante il tentativo di impostare il titolo della pagina utilizzando il nome dello stato corrente (tramite ui-router).Aggiornamento del tag del titolo utilizzando AngularJS e UI-Router

In realtà, il problema non è con l'impostazione del titolo, il problema è che il titolo viene impostato sul titolo dello stato successivo prima di history.pushState. Quindi quando passo a un nuovo URL, il primo elemento nella cronologia ha lo stesso nome della pagina corrente.

Stavo solo giocando con il campione (http://angular-ui.github.io/ui-router/sample/) e sono riuscito a riprodurlo anche lì. Se fai clic su Informazioni, quindi di nuovo a casa vedrai 2 voci diverse per "casa". Entrambi puntano all'URL corretto, ma i loro nomi sono storpiati. Stranamente, facendo clic su Contact.list e contact.details si imposta correttamente la cronologia.

C'è un modo per aggirare questo? Quando nella pipeline viene chiamato history.pushstate?

fonte

2013-11-25 ChrisThomas

Non sono stato in grado di riprodurre questo problema sull'esempio o sulle mie implementazioni. Forse ha a che fare con il browser in uso? –

L'ho appena provato con Chrome 33 e IE 10 e l'ho riprodotto in entrambi. – ChrisThomas

Ah, capisco cosa intendi ora. I titoli della cronologia sono tutti spostati indietro 1. Non appena si cambiano le pagine, l'ultima pagina ottiene il titolo della pagina corrente nella cronologia. Dato che il bug è presente anche negli esempi, probabilmente è solo un bug di un ui-router. Aprire un problema su gh? –

Ho una situazione simile alla tua e lo faccio come segue. Puoi inserirlo nel blocco di esecuzione dell'app principale come segue. ho avuto

angular.module('myApp').run([ 
    '$log', '$rootScope', '$window', '$state', '$location', 
    function($log, $rootScope, $window, $state, $location) { 

     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 
      if (toState.title) { 
       $rootScope.pageTitle = toState.title; 
      } 
     }); 

     $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) { 
      // something else 
     }); 

     $state.go('home'); 
    } 
]);

e nella testa html devo

<html class="no-js" class="ng-app" ng-app="..." id="ng-app"> 
    <head> 
    .... 
     <title ng-bind="pageTitle"></title>

speranza questo funziona per voi.

PS: consultare https://docs.angularjs.org/guide/module per i dettagli.

fonte

2014-07-10 03:11:41 salek

Dove metti il codice? In un controller? –

inserito nel blocco di esecuzione dei moduli principali – salek

Non ho ancora avuto la possibilità di provare questo, ma mostra il titolo corretto nella cronologia del browser? – ChrisThomas

Ho avuto una situazione "simile" ... e ho risposto here.

Fondamentalmente definisce $rootScope.$state = $state all'interno del metodo di corsa angolare. Ciò ci consente di accedere alle informazioni sugli stati attuali nei modelli.

<title ng-bind="$state.current.data.pageTitle"></title>

La chiave lo sta definendo sul $ rootScope nel metodo run.

fonte

2014-09-28 15:50:02 cwbutler

Ho scritto il plug-in angular-ui-router-title per questo. È possibile utilizzarlo per aggiornare il titolo della pagina a statico o valore dinamico in base allo stato corrente. Funziona correttamente anche con la cronologia del browser.

fonte

2015-05-10 16:41:09

Aggiornamento del tag del titolo utilizzando AngularJS e UI-Router

risposta

Problemi correlati