Trying to implement a shopping cart app where I need to pass an object into a service function using Angular. Following advice from another post, but encountering an unprovided error and a strange syntax error on page load. The issues seem to be originating here:
<form class="cart nobottommargin clearfix" ng-submit="addToCart({{producto}})" novalidate >
Here is the controller code:
.controller('DetalleProductoController',
['$scope', '$stateParams', 'Productos', 'Carrito',
function ($scope, $stateParams, Productos, Carrito) {
// Fetching the product by id passed in the UI-router
var prod = Productos.findById($stateParams.id);
$scope.producto = prod;
//ng-click addToCart from the factory
$scope.addToCart = Carrito.addToCart(prod);
}])
Below is the ssummary of the service being implemented:
MyApp.service('Carrito', ['Productos', '$scope', '$http',
function (Productos, $scope, $http){
var carritoUsuario = [];
var todosLosProductos = Productos.todos();
this.addToCart = function(Prod) {};
Any assistance would be greatly appreciated...
edit: Here's the full service code. Is there something fundamentally wrong that I'm doing?
MyApp.service('Carrito', ['Productos', '$scope', '$http',
function (Productos, $scope, $http){
var carritoUsuario = [];
var todosLosProductos = Productos.todos();
var unProducto = function() {
this.Name = "";
this.stockid = 0;
this.Description = "";
this.Price = 0;
this.Family = 1;
this.Modifiers = [];
this.Quantity = 1;
this.SKU = function () {return "" + this.stockid +
this.Modifiers.mod1 + this.Modifiers.mod2 +
this.Modifiers.mod3 + this.Modifiers.mod4 +
this.Modifiers.mod5};
}
/* Currently, this searches the local array */
this.findBySKU = function(sku) {
console.log("Finding: " + sku + " from Carrito service findBySKU...");
_.find(carritoUsuario, function (product){
return product.stockid == sku;
});
};
this.getProduct = function(id) {
console.log("Getting: " + id + " from Carrito service getProducto...");
Producto.findById(id);
};
this.getCart = function() {
console.log("Getting cart from Carrito service getCart");
carritoUsuario;
};
this.addToCart = function(Prod) {
/* Prod is an ng-model passed via ng-click=addtoCart(product)
on any purchase button. Data needs to be loaded into the html */
console.log("Passed: " + Prod + " -- into Carrito.addToCart...");
unProducto.Name = Prod.Name;
unProducto.stockid = Prod.stockid;
unProducto.Description = Prod.Description;
unProducto.Price = Prod.Price;
unProducto.Family = Prod.Family;
unProducto.Quantity = parseInt(Prod.quantity);
unProducto.Modifiers = {
"mod1":Prod.mod1,
"mod2":Prod.mod2,
"mod3":Prod.mod3,
"mod4":Prod.mod4,
"mod5":Prod.mod5
};
unProducto.SKU = "" + Prod.stockid + Prod.mod1 + Prod.mod2 + Prod.mod3 + Prod.mod4 + Prod.mod5;
if(angular.isDefined(Carrito.findBySKU(unProducto.SKU))) {
var i = _.findIndex(this.carritoUsuario, unProducto.SKU);
Carrito.carritoUsuario[i].Quantity++;
} else {
Carrito.carritoUsuario.push(unProducto);
console.log("Added: " + unProducto + " -- to the Carrito...");
}
};
this.totalCart = function() {
var total = 0;
_.forEach(carritoUsuario, function (e) {
total += parseFloat(e.Price) * parseFloat(e.Quantity);
});
return total;
}
}]);
Attempted reimplementation as a factory, yet still facing the same unprovided error:
MyApp.factory('Carrito', ['Productos', '$scope', '$http',
function (Productos, $scope, $http){
var carritoUsuario = [];
var todosLosProductos = Productos.todos();
var unProducto = function() {
this.Name = "";
this.stockid = 0;
this.Description = "";
this.Price = 0;
this.Family = 1;
this.Modifiers = [];
this.Quantity = 1;
this.SKU = function () {return "" + this.stockid +
this.Modifiers.mod1 + this.Modifiers.mod2 +
this.Modifiers.mod3 + this.Modifiers.mod4 +
this.Modifiers.mod5};
}
/* Currently, it searches the local array */
return {
findBySKU : function(sku) {
console.log("Finding: " + sku + " from Carrito service findBySKU...");
return _.find(carritoUsuario, function (product){
return product.stockid == sku;
});
},
getProduct : function(id) {
console.log("Getting: " + id + " from Carrito service getProducto...");
return Producto.findById(id);
},
getCart : function() {
console.log("Getting cart from Carrito service getCart");
return carritoUsuario;
},
addToCart : function(Prod) {
/* Prod is an ng-model passed via ng-click=addtoCart(product)
on any purchase button. Data needs to be loaded into the html */
console.log("Passed: " + Prod + " -- into Carrito.addToCart...");
unProducto.Name = Prod.Name;
unProducto.stockid = Prod.stockid;
unProducto.Description = Prod.Description;
unProducto.Price = Prod.Price;
unProducto.Family = Prod.Family;
unProducto.Quantity = parseInt(Prod.quantity);
unProducto.Modifiers = {
"mod1":Prod.mod1,
"mod2":Prod.mod2,
"mod3":Prod.mod3,
"mod4":Prod.mod4,
"mod5":Prod.mod5
};
unProducto.SKU = "" + Prod.stockid + Prod.mod1 + Prod.mod2 + Prod.mod3 + Prod.mod4 + Prod.mod5;
if(angular.isDefined(Carrito.findBySKU(unProducto.SKU))) {
var i = _.findIndex(this.carritoUsuario, unProducto.SKU);
Carrito.carritoUsuario[i].Quantity++;
} else {
Carrito.carritoUsuario.push(unProducto);
console.log("Added: " + unProducto + " -- to the Carrito...");
}
},
totalCart : function() {
var total = 0;
_.forEach(carritoUsuario, function (e) {
total += parseFloat(e.Price) * parseFloat(e.Quantity);
});
return total;
}
};
}]);