javascript - otro - ¿Pasando datos entre controladores en Angular JS?
modulos angularjs (18)
Tengo un controlador básico que muestra mis productos,
App.controller(''ProductCtrl'',function($scope,$productFactory){
$productFactory.get().success(function(data){
$scope.products = data;
});
});
En mi opinión estoy mostrando estos productos en una lista
<ul>
<li ng-repeat="product as products">
{{product.name}}
</li>
</ul
Lo que estoy tratando de hacer es cuando alguien haga clic en el nombre del producto, tengo otra vista llamada carrito donde se agrega este producto.
<ul class="cart">
<li>
//click one added here
</li>
<li>
//click two added here
</li>
</ul>
Entonces, mi duda aquí es, ¿cómo pasar estos productos pulsados del primer controlador al segundo? Supuse que el carrito también debería ser un controlador.
Manejo el evento click haciendo uso de la directiva. También creo que debería usar el servicio para lograr la funcionalidad anterior, pero ¿no puedo entender cómo? Debido a que el carrito estará predefinido, la cantidad de productos agregados podría ser 5/10, dependiendo de qué página sea el usuario. Así que me gustaría mantener este genérico.
Actualizar:
Creé un servicio para transmitir y en el segundo controlador lo recibí. Ahora la consulta es ¿cómo actualizo dom? Desde mi lista para soltar el producto está bastante codificado.
¿Cómo pasar estos productos pulsados del primer controlador al segundo?
Al hacer clic puede llamar al método que invoca broadcast :
$rootScope.$broadcast(''SOME_TAG'', ''your value'');
y el segundo controlador escuchará en esta etiqueta como:
$scope.$on(''SOME_TAG'', function(response) {
// ....
})
Como no podemos inyectar $ scope en los servicios, no hay nada como un singleton $ scope.
Pero podemos inyectar $rootScope . Entonces, si almacena valor en el Servicio, puede ejecutar $rootScope.$broadcast(''SOME_TAG'', ''your value''); en el cuerpo de servicio. (Ver descripción de @Charx sobre servicios)
app.service(''productService'', function($rootScope) {/*....*/}
Por favor revise el buen artículo sobre $broadcast , $broadcast
1
using $localStorage
app.controller(''ProductController'', function($scope, $localStorage) {
$scope.setSelectedProduct = function(selectedObj){
$localStorage.selectedObj= selectedObj;
};
});
app.controller(''CartController'', function($scope,$localStorage) {
$scope.selectedProducts = $localStorage.selectedObj;
$localStorage.$reset();//to remove
});
2
Al hacer clic puede llamar al método que invoca difusión:
$rootScope.$broadcast(''SOME_TAG'', ''your value'');
and the second controller will listen on this tag like:
$scope.$on(''SOME_TAG'', function(response) {
// ....
})
3
using $rootScope:
4
window.sessionStorage.setItem("Mydata",data);
$scope.data = $window.sessionStorage.getItem("Mydata");
5
Una forma de usar el servicio angular:
var app = angular.module("home", []);
app.controller(''one'', function($scope, ser1){
$scope.inputText = ser1;
});
app.controller(''two'',function($scope, ser1){
$scope.inputTextTwo = ser1;
});
app.factory(''ser1'', function(){
return {o: ''''};
});
A partir de la descripción, parece que debería estar usando un servicio. Consulte http://egghead.io/lessons/angularjs-sharing-data-between-controllers y el servicio AngularJS pasando datos entre los controladores para ver algunos ejemplos.
Podría definir su servicio de producto como tal:
app.service(''productService'', function() {
var productList = [];
var addProduct = function(newObj) {
productList.push(newObj);
};
var getProducts = function(){
return productList;
};
return {
addProduct: addProduct,
getProducts: getProducts
};
});
Dependencia inyectar el servicio en ambos controladores.
En su ProductController , defina alguna acción que agregue el objeto seleccionado a la matriz:
app.controller(''ProductController'', function($scope, productService) {
$scope.callToAddToProductList = function(currObj){
productService.addProduct(currObj);
};
});
En su CartController , obtenga los productos del servicio:
app.controller(''CartController'', function($scope, productService) {
$scope.products = productService.getProducts();
});
Cree una fábrica en su módulo y agregue una referencia de la fábrica en el controlador y use sus variables en el controlador y ahora obtenga el valor de los datos en otro controlador agregando una referencia donde lo desee
Hay tres formas de hacerlo,
a) utilizando un servicio
b) Explotación de la relación padre / hijo dependiente entre los ámbitos del controlador.
c) En Angular 2.0, la palabra clave "As" pasará los datos de un controlador a otro.
Para más información con el ejemplo, por favor revise el siguiente enlace:
He creado una fábrica que controla el alcance compartido entre el patrón de la ruta, para que pueda mantener los datos compartidos justo cuando los usuarios navegan en la ruta principal de la misma ruta.
.controller(''CadastroController'', [''$scope'', ''RouteSharedScope'',
function($scope, routeSharedScope) {
var customerScope = routeSharedScope.scopeFor(''/Customer'');
//var indexScope = routeSharedScope.scopeFor(''/'');
}
])
Por lo tanto, si el usuario va a otra ruta, por ejemplo ''/ Soporte'', los datos compartidos para la ruta ''/ Cliente'' se destruirán automáticamente. Pero, si en lugar de esto, el usuario va a las rutas ''secundarias'', como ''/ Customer / 1'' o ''/ Customer / list'', el alcance no se destruirá.
Puede ver un ejemplo aquí: http://plnkr.co/edit/OL8of9
No sé si ayudará a alguien, pero en base a la respuesta de Charx (¡gracias!), He creado un servicio de caché simple. Siéntase libre de usar, remezclar y compartir:
angular.service(''cache'', function() {
var _cache, _store, _get, _set, _clear;
_cache = {};
_store = function(data) {
angular.merge(_cache, data);
};
_set = function(data) {
_cache = angular.extend({}, data);
};
_get = function(key) {
if(key == null) {
return _cache;
} else {
return _cache[key];
}
};
_clear = function() {
_cache = {};
};
return {
get: _get,
set: _set,
store: _store,
clear: _clear
};
});
Para mejorar la solución propuesta por @Maxim usando $ broadcast, los datos de envío no cambian
$rootScope.$broadcast(''SOME_TAG'', ''my variable'');
pero a escuchar datos
$scope.$on(''SOME_TAG'', function(event, args) {
console.log("My variable is", args);// args is value of your variable
})
Para su información, el objeto $ scope tiene el $ emit, $ broadcast, $ en Y el objeto $ rootScope tiene el mismo $ emit, $ broadcast, $ en
Lea más sobre el patrón de diseño de publicación / suscripción en angular $broadcast
Podemos almacenar datos en sesión y usarlos en cualquier parte del programa.
$window.sessionStorage.setItem("Mydata",data);
Otro lugar
$scope.data = $window.sessionStorage.getItem("Mydata");
Puedes hacer esto por dos métodos.
Al usar
$rootscope, pero no lo recomiendo. El$rootScopees el alcance más alto. Una aplicación puede tener solo un$rootScopeque se compartirá entre todos los componentes de una aplicación. Por lo tanto, actúa como una variable global.Utilizando servicios. Puedes hacer esto compartiendo un servicio entre dos controladores. El código para el servicio puede tener este aspecto:
app.service(''shareDataService'', function() { var myList = []; var addList = function(newObj) { myList.push(newObj); } var getList = function(){ return myList; } return { addList: addList, getList: getList }; });Puedes ver mi violín here .
Una forma aún más sencilla de compartir los datos entre los controladores es mediante el uso de estructuras de datos anidadas. En lugar de, por ejemplo,
$scope.customer = {};
nosotros podemos usar
$scope.data = { customer: {} };
La propiedad de data se heredará del ámbito principal para que podamos sobrescribir sus campos, manteniendo el acceso desde otros controladores.
Una forma de usar el servicio angular:
var app = angular.module("home", []);
app.controller(''one'', function($scope, ser1){
$scope.inputText = ser1;
});
app.controller(''two'',function($scope, ser1){
$scope.inputTextTwo = ser1;
});
app.factory(''ser1'', function(){
return {o: ''''};
});
<div ng-app=''home''>
<div ng-controller=''one''>
Type in text:
<input type=''text'' ng-model="inputText.o"/>
</div>
<br />
<div ng-controller=''two''>
Type in text:
<input type=''text'' ng-model="inputTextTwo.o"/>
</div>
</div>
Vi las respuestas aquí, y está respondiendo a la pregunta de compartir datos entre los controladores, pero ¿qué debo hacer si quiero que un controlador le notifique al otro sobre el hecho de que los datos se han cambiado (sin usar difusión)? ¡FÁCIL! Solo usando el famoso patrón de visitante:
myApp.service(''myService'', function() {
var visitors = [];
var registerVisitor = function (visitor) {
visitors.push(visitor);
}
var notifyAll = function() {
for (var index = 0; index < visitors.length; ++index)
visitors[index].visit();
}
var myData = ["some", "list", "of", "data"];
var setData = function (newData) {
myData = newData;
notifyAll();
}
var getData = function () {
return myData;
}
return {
registerVisitor: registerVisitor,
setData: setData,
getData: getData
};
}
myApp.controller(''firstController'', [''$scope'', ''myService'',
function firstController($scope, myService) {
var setData = function (data) {
myService.setData(data);
}
}
]);
myApp.controller(''secondController'', [''$scope'', ''myService'',
function secondController($scope, myService) {
myService.registerVisitor(this);
this.visit = function () {
$scope.data = myService.getData();
}
$scope.data = myService.getData();
}
]);
De esta manera simple, un controlador puede actualizar otro controlador de que algunos datos se han actualizado.
creo que el
mejor manera
es usar $ localStorage. (Funciona todo el tiempo)app.controller(''ProductController'', function($scope, $localStorage) {
$scope.setSelectedProduct = function(selectedObj){
$localStorage.selectedObj= selectedObj;
};
});
Su controlador de tarjeta será
app.controller(''CartController'', function($scope,$localStorage) {
$scope.selectedProducts = $localStorage.selectedObj;
$localStorage.$reset();//to remove
});
También puedes añadir
if($localStorage.selectedObj){
$scope.selectedProducts = $localStorage.selectedObj;
}else{
//redirect to select product using $location.url(''/select-product'')
}
Solución sin crear Servicio, usando $ rootScope:
Para compartir propiedades entre los controladores de aplicaciones, puede usar Angular $ rootScope. Esta es otra opción para compartir datos, poniéndolos para que la gente sepa sobre ellos.
La forma preferida de compartir alguna funcionalidad entre los Controladores es Servicios, para leer o cambiar una propiedad global que puede usar $ rootscope.
var app = angular.module(''mymodule'',[]);
app.controller(''Ctrl1'', [''$scope'',''$rootScope'',
function($scope, $rootScope) {
$rootScope.showBanner = true;
}]);
app.controller(''Ctrl2'', [''$scope'',''$rootScope'',
function($scope, $rootScope) {
$rootScope.showBanner = false;
}]);
Usando $ rootScope en una plantilla (propiedades de acceso con $ root):
<div ng-controller="Ctrl1">
<div class="banner" ng-show="$root.showBanner"> </div>
</div>
angular.module(''testAppControllers'', [])
.controller(''ctrlOne'', function ($scope) {
$scope.$broadcast(''test'');
})
.controller(''ctrlTwo'', function ($scope) {
$scope.$on(''test'', function() {
});
});
var custApp = angular.module("custApp", [])
.controller(''FirstController'', FirstController)
.controller(''SecondController'',SecondController)
.service(''sharedData'', SharedData);
FirstController.$inject = [''sharedData''];
function FirstController(sharedData) {
this.data = sharedData.data;
}
SecondController.$inject[''sharedData''];
function SecondController(sharedData) {
this.data = sharedData.data;
}
function SharedData() {
this.data = {
value: ''default Value''
}
}
Primer controlador
<div ng-controller="FirstController as vm">
<input type=text ng-model="vm.data.value" />
</div>
Segundo controlador
<div ng-controller="SecondController as vm">
Second Controller<br>
{{vm.data.value}}
</div>