Saltar al contenido
Cómo compartir datos entre controladores en AngularJS

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.

2min read

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.

Solicitar una demostración