Cómo transferir los datos entre los controladores.

Creí angular y me enfrenté a un problema: tengo un SPA que contiene dos partes con controladores, los datos regresan del archivo json. El primer control para mostrar el menú, el segundo para agregar un nuevo elemento. Por ahora, en el archivo json hay dos objetos, pero cuando agregué un tercer elemento en el segundo controlador, desapareció cuando regresé a la primera página. ¿Cómo puedo arreglarlo? He leído que la fábrica puede transferir los datos entre los controladores, pero nunca lo he usado.

Módulo angular:

var myApp = angular.module("testModule", ['ngRoute']); myApp.config(function ($routeProvider){ $routeProvider.when('/', { templateUrl: 'pages/main.html', controller: 'mainCtrl' }) .when('/add', { templateUrl: 'pages/add.html', controller: 'addCtrl' }) }) myApp.controller("mainCtrl", function ($scope, $http) { $http.get("model/data.json").success(function (response) { $scope.list = response; }) }); myApp.controller("addCtrl", function ($scope, $http) { $scope.addAdv = function(newAdv){ $http.get("model/data.json").success(function (response) { response.push({ name: newAdv.name, shop: newAdv.shop }); }) }; }); 

Archivo JSON:

 [{ "name": "New Item", "shop": "Titan" }, { "name": "New Item1", "shop": "Titan" }] 

4 Solutions collect form web for “Cómo transferir los datos entre los controladores.”

Puede utilizar servicios angulares para compartir datos entre sus controladores. Primero debe crear un servicio para obtener información de su servidor.

 var app = angular.module('app', ['ngRoute']); app.service('dataService', function($http) { var data = {}; data.list = []; var getData = function(){ $http.get("model/data.json").then(function (response) { data.list = response.data; },function(err){}); } return { getDataFromServer:getData, getData:data, } }); 

Ahora puedes usar este servicio en tu controlador:

 app.controller("mainCtrl", function ($scope, dataService) { dataService.getDataFromServer(); }); app.controller("addCtrl", function ($scope, dataService) { $scope.data = dataService.getData; $scope.data.list.push({ name:"foo", shop:"bar" }); }); 

Y aquí está el código jsfiddle: https://jsfiddle.net/xqn5yu8g/

Para obtener más información sobre los servicios angulares, consulte la página de documentos de servicios angulares.

Como dijo Daniel.v, un servicio es la mejor manera. También hay dos alternativas menos elegantes:

  • “si los datos son propiedad de dos controladores, estos deben compartir un $ parent, ¡y debe ser el propietario de los datos!”
  • “hey, ¿por qué no usamos eventos y oyentes? ¡Vamos por $ broadcast y $ emit!”

Pero principalmente prefiero los servicios.

  1. servicio de uso
  2. usuario $ broadcast o $ emit
  3. usar $ rootScope (no recomendado)

Esto funcionará para usted:

`

 

`

  • ¿Cómo hacer templates sin ng-repeat y pasar datos a $ scope con angular-drag-and-drop-lists?
  • ¿Entender la jerarquía del $ scope en AngularJS?
  • Evento angular.js $ destroy - ¿Debo desvincularlo manualmente?
  • Angularjs error de progreso
  • en angularjs, ¿cómo obtienes un `select` para refrescar cuando cambia la matriz de ng-options?
  • AngularJS - Controlador de directivas hijo de Access
  • angular.js: la actualización del model no activa la actualización de la vista
  • ¿No se puede inyectar `$ http` usando la syntax` app.controller` explícita de AngularJS?
  • ¿Podemos acceder al valor de input del usuario en el filter personalizado? Para acceder al número de input del usuario desde el controller o directamente en el filter personalizado
  • Angular js foreach solo devuelve el último artículo en matriz
  • Accediendo al scope principal en la directiva al usar controllerAs
  • Verificar existencia de atributo en Directiva Angular
  • angularjs image src cambia cuando el model cambia
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.