Cómo enviar datos de un controlador a otro controlador en AngularJS

Hay tantos métodos que pueden pasar datos de un controlador a otro controlador.

1. Servicios o Fábrica . [Comúnmente utilizado]

código de muestra para Servicios:

módulo var = angular.module (‘myapp’, []);

module.service (‘userService’, function () {
this.users = [‘John’, ‘James’, ‘Jake’];
});

Código de muestra para la fábrica:

module.factory (‘userServices’, function () {

var fac = {};

fac.users = [‘John’, ‘James’, ‘Jake’];

volver fac;

});

Luego puede inyectar estos servicios o fábricas en su controlador. Donde pueda obtener datos de estos.

2. $ emit y $ broadcast

// primer controlador

app.controller (“firstCtrl”, function ($ scope) {

$ scope. $ on (‘eventName’, function (event, args) {

$ scope.message = args.message;

}); });

// segundo controlador

app.controller (“secondCtrl”, función ($ scope) {

$ scope.handleClick = function (msg) {

$ scope. $ emit (‘eventName’, {mensaje: msg}); }; });

Controlador principal

Emitir mensaje:

Controlador secundario

[Gracias y referencia: Comprensión de $ emit, $ broadcast y $ on en AngularJS]

3. $ rootScope

$ rootScope: es un objeto principal de todos los objetos angulares “$ scope” creados en una página web.

$rootScope está disponible globalmente, donde $scope solo está disponible para el controlador actual y sus hijos.

ejemplo:

// controlador 1

$ rootScope.controllerVariable1 = ”John”;

donde sea que puedas conseguirlo.

// controlador 2

$ scope.name = $ rootScope.controllerVariable1;

{ Nota : $ rootScope config para datos globales o alguna configuración de datos pequeños. La transferencia de datos de gran tamaño va a la fábrica o servicios del primer método.

4.El controlador hereda a otro controlador

app.controller (‘ParentCtrl’, function ($ scope) {
// Soy el hermano, pero quiero actuar como padre
});

app.controller (‘ChildCtrl’, función ($ scope, $ controller) {
$ controller (‘ParentCtrl’, {$ scope: $ scope});
});

5. $ padre

Vista de relación de padres anidados, puede usar $ parent

{{title}}

{{descripción}}

{{title}}

6. Almacenamiento Local

Depende de su proyecto, puede usar el almacenamiento local para configurar los datos en local y obtenerlos de donde sea.

no use la configuración de datos grandes en el almacenamiento local.

[Nota: el usuario es completamente responsable de la seguridad de los datos.]

Enviar

Puede usar los servicios para organizar y compartir código en su aplicación.

  1. Cree un servicio utilizando la fábrica de angular, por ejemplo, UserService. Escriba qué datos desea compartir en este servicio.
  2. Inyecte “UserService” en ControllerOne y ControllerTwo.
  3. Acceda a métodos de “Servicio de usuario” desde los controladores

Encuentre a continuación el código de muestra que uso regularmente para el mismo propósito

var myApp = angular.module (‘myApp’, []);

myApp.controller (‘ControllerOne’, [‘$ scope’, ‘UserService’, function ($ scope, UserService) {
UserService.setUserName (“algún nombre”);
}]);

myApp.controller (‘ControllerTwo’, [‘$ scope’, UserService, function ($ scope, UserService) {
UserService.getUserName ();
}]);

myApp.factory (‘UserService’, function () {
servicio var = {
setUserName: setUserName,
getUserName: getUserName
};

servicio de devolución;

función setUserName () {
// código para establecer el nombre de usuario
}

función getUserName () {
// código para obtener el nombre de usuario
}
});

Suponiendo que está utilizando angular 1, debe usar un servicio angular para pasar datos entre controladores.

por ejemplo:

angular.module (‘youApp’) .service (‘DataService’, function () {

self.dataToBeShared = {

data1: // alguna fecha,

data2: // algunos otros datos

}

});

// y luego en tu controlador solo agrégalo como una dependencia

angular.module (‘youApp’) .controller (‘myController’, function (DataService) {

$ scope.sharedData = DataService.dataToBeShared;

});

Hay 5 formas de compartir datos entre el controlador en angular js:

  1. Usando servicios
  2. Usando eventos
  3. Al asignar modelos en $ rootScope
  4. Usando $ parent, $$ childHead, $$ nextSibling
  5. Uso de ControllerAs u otras formas de herencia.

Existen varios métodos para pasar los datos de un controlador a otro:

Métodos:

  1. Puede enviar la url como parámetros.
  2. Puede almacenar sus datos en localStorage en el primer controlador (su controlador con datos listos) y leer (acceder) esos datos en cualquier lugar (cualquier controlador sin restricciones).
  3. Puede almacenar esos datos en rootScope y acceder a esos datos en cualquier lugar (cualquier controlador no tiene restricciones).

Espero que entiendas el punto. Si desea detalles sobre cómo almacenar esos datos en localStorage o rootScope, búsquelo en Google. Le dará las formas más fáciles de lidiar con eso.