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:

`

 

`

  • Modelo de un solo object para AngularJS
  • ¿Puedo evitar el nombre de la variable object en ng-repeat loop?
  • Actualización de la directiva angular sobre el cambio de parameters
  • Directiva AngularJs con controller dynamic y plantilla
  • Vista con nombre en ui-router angular que no se actualiza, a pesar de ser visto
  • Si no, las condiciones en las templates de angularjs
  • Atributo de nombre de formulario dynamic <input type = "text" name = "{{variable-name}}" /> en Angularjs
  • Cómo get elemento html por Id pasado desde ng-init de angular
  • Usar "this" en lugar de "scope" con controlleres y directivas AngularJS
  • Angular ng-deshabilitado con function
  • ¿Por qué no pueden las directivas múltiples pedir un scope aislado en el mismo elemento?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.