Cómo compartir datos entre controladores en AngularJS
En mis clases de AngularJS, a menudo me preguntan: "¿Cómo comparto datos entre los controladores en AngularJS?" En Internet, hay muchas soluciones sugeridas.
En mis clases de AngularJS, a menudo me preguntan: "¿Cómo comparto datos entre los controladores en AngularJS?" En Internet, hay muchas soluciones sugeridas.
Sin embargo, prefiero compartir datos utilizando el método del Servicio de Datos Compartidos, y eso es lo que vamos a explorar en esta publicación.
Para empezar, supongamos que queremos compartir un objeto Product entre los controladores. Aquí he creado un servicio AngularJS llamado SharedDataService como se muestra en el fragmento a continuación:
myApp.service('SharedDataService', function () {
var Product = {
name: '',
price: ''
};
return Product;
});
A continuación, vamos a crear dos controladores diferentes mediante SharedDataService. En los controladores, estamos utilizando el servicio creado en el paso anterior. Los controladores se pueden crear como se muestra a continuación:
var myApp = angular.module("myApp", ['CalService']);
myApp.controller("DataController1", ['$scope', 'SharedDataService',
function ($scope, SharedDataService) {
$scope.Product = SharedDataService;
}]);
myApp.controller("DataController2", ['$scope', 'SharedDataService',
function ($scope, SharedDataService) {
$scope.Product = SharedDataService;
}]);
En la vista, simplemente podemos usar los controladores como se muestra en la lista a continuación:
<div ng-controller="DataController1">
<h2>In Controller 1</h2>
<input type="text" ng-model="Product.name" /> <br/>
<input type="text" ng-model="Product.price" />
<h3>Product {{Product.name}} costs {{Product.price}} </h3>
</div>
<hr/>
<div ng-controller="DataController2">
<h2>In Controller 2</h2>
<h3>Product {{Product.name}} costs {{Product.price}} </h3>
</div>
Ahora podemos compartir los datos entre los controladores. Como puede ver, el nombre y el precio del producto se establecen en el DataController1, y nosotros obtenemos los datos en el DataController2.
¿Tienes alguna opción mejor que la que utilizas para compartir datos? O tal vez tenga un escenario complejo que puede no ser resuelto por el enfoque anterior. Si es así, ¡házmelo saber! Cuéntame sobre ello en los comentarios a continuación.
