Nuestro grupo de redactores ha pasado mucho tiempo investigando la resolución a tus interrogantes, te ofrecemos la soluciones así que esperamos serte de gran ayuda.
Solución:
Opción 1 – personalizado service
Puede utilizar un servicio angular dedicado para almacenar y compartir datos entre controladores (los servicios son objetos de instancia única)
definición de servicio
app.service('commonService', function ($http)
var info;
return
getInfo: getInfo,
setInfo: setInfo
;
// .................
function getInfo()
return info;
function setInfo(value)
info = value;
);
uso en varios controladores
app.controller("HomeController", function ($scope, commonService)
$scope.setInfo = function(value)
commonService.setInfo(value);
;
);
app.controller("MyController", function ($scope, commonService)
$scope.info = commonService.getInfo();
);
Opción 2 – html5 localStorage
Puede utilizar el almacenamiento local del navegador integrado y almacenar sus datos desde cualquier lugar
escribiendo
$window.localStorage['my-data'] = 'hello world';
leyendo
var data = $window.localStorage['my-data']
// ...
- echa un vistazo a este increíble proyecto: https://github.com/grevory/angular-local-storage
Opción 3: a través de la API del servidor web
Si necesita conservar datos entre diferentes usuarios, debe guardarlos en algún lugar del lado del servidor (db / cache)
function getProfile()
return $http.get(commonService.baseApi + '/api/profile/');
function updateProfile(data)
var json = angular.toJson(data);
return $http.post(commonService.baseApi + '/api/profile/', json);
EDITAR Vea la respuesta de Jossef Harush donde ha escrito una respuesta en profundidad que cubre otros métodos, incluido este.
Recomendaría usar localStorage o sessionStorage – http://www.w3schools.com/html/html5_webstorage.asp.
El almacenamiento local HTML proporciona dos objetos para almacenar datos en el cliente:
- window.localStorage: almacena datos sin fecha de vencimiento
- window.sessionStorage: almacena datos para una sesión (los datos se pierden cuando se cierra la pestaña del navegador)
Esto supone que no desea PUBLICAR / PONER los datos en su servicio web (mención del servicio de Windows en su pregunta).
Si sus datos son array o algún tipo, puede convertirlo a JSON para almacenarlo como un string y luego, cuando lo necesite, puede analizarlo de la siguiente manera: ¿Cómo almaceno un array en localStorage ?:
var names = [];
names[0] = prompt("New member name?");
localStorage["names"] = JSON.stringify(names);
//...
var storedNames = JSON.parse(localStorage["names"]);
Hay una opción que no se menciona en otras respuestas (AFAIK).
EVENTOS
-
Puede utilizar eventos para la comunicación entre controladores.
-
Es una comunicación sencilla que no necesita un mediador (como un servicio) y el usuario no puede borrarla (como el almacenamiento HTML).
-
Todo el código está escrito en controladores con los que intenta comunicarse y, por lo tanto, es muy transparente.
Un buen ejemplo de cómo aprovechar los eventos para comunicarse entre controladores se puede ver a continuación.
El editor es el alcance que quiere publicar (en otras palabras, dejar que otros sepan que sucedió algo). A la mayoría no les importa lo que ha sucedido y no forman parte de esta historia.
El suscriptor es el que se preocupa de que se haya publicado cierto evento (es decir, cuando se le notifica oye, esto pasó, reacciona).
Usaremos $ rootScope como mediador entre el editor y un suscriptor. Esto siempre funciona porque cualquier alcance emite un evento, $ rootScope es un padre de ese alcance o padre de un padre de un padre. Cuando $ rootScope transmite (le dice a todos los que heredan) sobre un evento, todos escuchan (ya que $ rootScope es solo eso, la raíz del árbol de herencia del alcance) por lo que todos los demás alcances en la aplicación son un hijo de él o un hijo de un hijo de un hijo.
// publisher
angular.module('test', []).controller('CtrlPublish', ['$rootScope','$scope',
function ($rootScope, $scope)
$scope.send = function()
$rootScope.$broadcast('eventName', 'message');
;
]);
// subscriber
angular.module('test').controller('ctrlSubscribe', ['$scope',
function ($scope)
$scope.$on('eventName', function (event, arg)
$scope.receiver = 'got your ' + arg;
);
]);
Arriba vemos dos controladores que se comunican un mensaje mediante un evento. El evento tiene un nombre, tiene que ser único, de lo contrario, un suscriptor no diferencia entre eventos. El parámetro de evento contiene datos autogenerados pero a veces útiles, el mensaje es la carga útil. En este ejemplo, es un string pero puede ser cualquier objeto. Así que simplemente coloque todos los datos que desea comunicar dentro de un objeto y envíelos a través de un evento.
NOTA:
Puede evitar usar el alcance de la raíz para este propósito (y limitar el número de controladores que son notificados de un evento) en caso de que dos alcances estén en línea de herencia directa el uno del otro. Más explicación a continuación:
$ rootScope. $ emit solo permite que otros oyentes de $ rootScope lo capten. Esto es bueno cuando no quieres que todos los $ scope lo obtengan. Principalmente una comunicación de alto nivel. Piense en ello como adultos hablando entre ellos en una habitación para que los niños no puedan escucharlos.
$ rootScope. $ broadcast es un método que permite que prácticamente todo lo escuche. Esto sería el equivalente a que los padres griten que la cena está lista para que todos en la casa la escuchen.
$ alcance. $ emit es cuando quiere que $ scope y todos sus padres y $ rootScope escuchen el evento. Este es un niño lloriqueando con sus padres en casa (pero no en una tienda de comestibles donde otros niños pueden escuchar). Este es un atajo para usar cuando desea comunicarse con el editor que es hijo o hijo n-ésimo del suscriptor.
$ alcance. $ transmisión es para el propio $ scope y sus elementos secundarios. Este es un niño que le susurra a sus animales de peluche para que sus padres no puedan oír.
EDITAR: Pensé que Plunker con un ejemplo más elaborado sería suficiente, así que decidí mantenerlo aquí. Esta explicación elaborada debería ser mejor.