2012-09-29 14 views
14

Qual è il modo migliore per passare il messaggio nello scenario seguente.Passaggio dell'oggetto tra le viste (messaggio flash)

Nello scenario di successo di $scope.p.$save, il risultato contiene un messaggio (res.message), che mi piace visualizzare nella vista successiva ($location.path("/test/"+res.reply.Id)). Senza AngularJS, potrei passarlo nell'URL o salvarlo nei cookie di sessione. Ma, credo che ci potrebbe essere un modo migliore in AngularJS in quanto non vi è alcun reindirizzamento del browser e lo stato dovrebbe essere disponibile. Qual è il modo migliore per raggiungere questo obiettivo?

Impostandolo in rootScope viene visualizzato mentre utilizzo il pulsante Indietro del browser e l'ambito del messaggio deve essere utilizzato solo per la prima navigazione nella nuova vista.

function NewCtrl(Phone, $location, $rootScope, $scope) { 
    $scope.p = new Phone(); 
    $scope.save = function() { 
     $scope.p.$save(
      {}, 
      function (res) { 
       $rootScope.message = res.message **//<-- this will cause message still set when using browser back button, etc** 
       $location.path("/test/"+res.reply.Id); **//<-- Req: needs to pass the message to next view** 
      }, function (res) { 
      //TODO 
      } 
     ); 
    }; 
} 
.... 
PhoneApp.factory('Phone', function ($resource) { 
    return $resource('/api/test/:_id') 
}); 

risposta

16

È possibile utilizzare un servizio che visualizza il flash su $ routeChangeSuccess.

Ogni volta che si imposta un messaggio flash, aggiungerlo a una coda e quando il percorso cambia, togliere il primo elemento dalla coda e impostarlo sul messaggio corrente.

Ecco una demo:

http://plnkr.co/edit/3n8m1X?p=preview

+0

grazie molto per il vostro aiuto e sforzo. – bsr

+0

L'ho appena modificato, ho pensato a un'implementazione ** molto ** migliore e più semplice, che supporta più flash, utilizzando un array. –

+1

Si può anche considerare '$ routeChangeStart' poiché a volte il successo è (a seconda della configurazione) chiamato troppo tardi nel processo (la nuova pagina potrebbe già essere caricata e l'ambito di avviso risolto). –

0

Non credo che ci sia un modo per eseguire questa impostazione predefinita su AngularJS. La cosa migliore sarebbe passare il messaggio (codificato) attraverso una stringa di query.

5

che stavo cercando di implementare una funzionalità simile, ma in realtà ha voluto più di un messaggio stile ringhio.

Ho aggiornato l'eccellente codice di plinkr che Andy ha fornito in precedenza per includere un metodo "pop" che sfrutta la libreria di notifica stile growl toastr.

Il mio aggiornamento consente inoltre di specificare il tipo di notifica (informazioni, avviso, esito positivo, errore) e titolo.

Il metodo "pop" salta l'aggiunta del messaggio alla coda e lo apre immediatamente sullo schermo. La funzionalità set/get del precedente plinkr di Andy rimane per lo più invariata.

Potete trovare il mio aggiornamento qui: http://plnkr.co/edit/MY2SXG?p=preview

+0

Vale la pena notare, se l'oggetto messaggio che passi in flash.set() è un ngmodel, viene passato per riferimento, quindi più voci nella coda saranno tutte cloni dello stesso oggetto. In altre parole, se si fa qualcosa di simile: $ scope.msg = {title: 'title', body: 'msg body', digitare: 'info'}; quindi utilizzare un modulo come modello e passare questa variabile di ambito per impostare, qualsiasi cosa già in coda verrà modificata per contenere i nuovi valori ... che tipo di sconfigge lo scopo di una coda di messaggi;) –

+0

l'esempio originale ha avuto un problema durante il caricamento della libreria toatr - Ho aggiornato l'esempio e incluso lo script toastr inline: http://plnkr.co/edit/vSWKtv?p=preview –

+0

Grazie. Qualcosa deve essere cambiato da quando ho scritto che ... stava caricando in precedenza :) –

Problemi correlati