Geek Answers Handbook

Separate AngularJS service parent link

I use the AngularJS service to store data from several pages to be presented together. See code below.

In my Chrome console, if I observe checkoutData.shipping , I return the correct data object. If I observe checkoutData.data , I get an empty object where the delivery property is empty.

They should point to the same object, right? Why will it work with .shipping and not use .data? The reason it is configured this way is because the delivery page only cares about delivery, and the last page requires everything in .data.

 (function() { angular.module('app').factory('checkoutData', [function() { var data = { carrierId: null, serviceTypeId: null, shippingCost: {}, billingOptionId: null, shipping: {}, billing: {}, cart: null }; var inputForms = {}; var options = { shippingOptions: null, billingOptions: null, selectedShippingOption: null }; var staticContent = { billing: {}, cart: {}, shipping: {} }; return { data: data, shipping: data.shipping, inputForms: inputForms, cart: data.cart, billingOptionId: data.billingOptionId, billingOptions: options.billingOptions, carrierId: data.carrierId, serviceTypeId: data.serviceTypeId, shippingOptions: options.shippingOptions, staticContentBilling: staticContent.billing, staticContentCart: staticContent.cart, staticContentShipping: staticContent.shipping, selectedShippingOption: options.selectedShippingOption, setValid: function(formName, valid) { inputForms[formName].valid = valid; }, initializeForm: function(formName) { inputForms[formName] = {}; }, formInitialized: function (formName) { return inputForms[formName] != null; } } }]); })();
+4
source share
2 answers

One suggestion is to make it easier for you to share your data models with your methods. And there is no need to try to keep multiple references to the same object within the same factory. There is nothing wrong with doing, for example, ng-model="checkoutModule.data.shipping.firstName" . Is this more verbal? Yes. It is not right? Not.

So maybe something like

 angular.module('app').factory('checkoutData', [function() { return { dataModel: { carrierId: null, serviceTypeId: null, shippingCost: {}, shipping: {}, // This should be databound to an object from "shippingOptions", removing the need for "selectedShippingOption" billing: {}, // This should be databound to an object from "billingOptions", removing the need for "billingOptionId" cart: null }, options: { shippingOptions: null, billingOptions: null }, inputForms: {} }; }]);

for your data and

 angular.module('app').factory('checkoutModule', ['checkoutData', function(checkoutData) { return { data: checkoutData.dataModel, options: checkoutData.options, inputForms: checkoutData.inputForms, setValid: function(formName, valid) { checkoutData.inputForms[formName].valid = valid; }, initializeForm: function(formName) { checkoutData.inputForms[formName] = {}; }, formInitialized: function (formName) { return checkoutData.inputForms[formName] != null; } } }]);

for a factory that ties it all together.

+2
source

From what I see, there is no way to set the value of data.shipping , except to use something like:

 checkoutData.shipping = {"country" : "Sweden"};

This will cause checkoutData.shipping point to the new object, and checkoutData.shipping will return this object:

 {"country" : "Sweden"};

but checkoutData.data will return the original empty shipping object since we did not update this value.

If instead you create a function to set the delivery value in the checkoutData service:

 setShipping : function(s){ data.shipping = s },

and use this to set the delivery data, you will get the values ​​you want from checkout.data and checkout.shipping .

Take a look at this for a demo: jsfiddle

+2
source

More articles:


All Articles