2012-09-29 19 views
14

¿Cuál es la mejor forma de pasar el mensaje en el escenario siguiente?Pasar el objeto entre las vistas (mensaje flash)

En el caso de éxito de $scope.p.$save, el resultado contiene un mensaje (res.message), que me gusta mostrar en la vista siguiente ($location.path("/test/"+res.reply.Id)). Sin AngularJS, puedo pasarlo en la url o guardarlo en cookies de sesión. Pero, supongo que podría haber una mejor manera en AngularJS ya que no hay redirección del navegador y el estado debería estar disponible. ¿Cuál es la mejor manera de lograr esto?

configurándolo en rootScope lo muestra mientras uso el botón Atrás del navegador, y el alcance del mensaje solo debe aparecer en la primera navegación a la nueva 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') 
}); 

Respuesta

16

Puede usar un servicio que muestre el flash en $ routeChangeSuccess.

Cada vez que configura un mensaje flash, agréguelo a una cola y, cuando la ruta cambie, retire el primer elemento de la cola y ajústelo al mensaje actual.

He aquí una demostración:

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

+0

Gracias mucho por su ayuda y esfuerzo. – bsr

+0

Acabo de editarlo, pensé en una implementación ** mucho ** mejor y más simple, que admite múltiples flashes, usando una matriz. –

+1

También puede considerar '$ routeChangeStart' ya que el éxito es a veces (según su configuración) llamado demasiado tarde en el proceso (la nueva página puede estar cargada y el alcance de la alerta resuelto). –

0

No creo que haya una manera de hacer esto por defecto en AngularJS. Su mejor opción sería pasar el mensaje (codificado) a través de una cadena de consulta.

5

que estaba buscando para implementar una funcionalidad similar, pero en realidad querían más de un mensaje de estilo gruñido.

He actualizado el excelente código de plinkr que Andy proporcionó anteriormente para incluir un método 'pop' que aprovecha la biblioteca de notificación de gruñidos toastr.

Mi actualización también le permite especificar el tipo de notificación (información, advertencia, éxito, error) y el título.

El método 'pop' omite agregar el mensaje a la cola, y en su lugar aparece en la pantalla de inmediato. La funcionalidad set/get del anterior plinkr de Andy se mantiene casi sin cambios.

Puede encontrar mi actualización aquí: http://plnkr.co/edit/MY2SXG?p=preview

+0

Vale la pena señalar, si el objeto de mensaje que pasa a flash.set() es un ngmodel, se pasa por referencia, por lo que las entradas múltiples en la cola serán clones del mismo objeto. En otras palabras, si haces algo como esto: $ scope.msg = {title: 'title', body: 'msg body', escribe: 'info'}; y luego tener un formulario usando esto como su modelo y pasar esta variable de ámbito para establecer, todo lo que ya está en la cola se cambiará para contener los nuevos valores ... que tipo de derrota el propósito de una cola de mensajes;) –

+0

Su el ejemplo original tenía un problema al cargar la biblioteca de toatr. Actualicé la muestra e incluí el script de toastr en línea: http://plnkr.co/edit/vSWKtv?p=preview –

+0

Gracias. Algo debe haber cambiado desde que escribí eso ... estaba cargando anteriormente :) –

Cuestiones relacionadas