我正在使用 AngularJS 服务来存储来自多个页面的数据,以便一起提交。请参阅下面的代码。
在我的 Chrome 控制台中,如果我观察到 checkoutData.shipping
,我会返回包含数据的正确对象。如果我观察到 checkoutData.data
,我会得到一个空对象,它的 shipping 属性是空白的。
这些应该指向同一个对象,对吧?为什么它会使用 .shipping 而不是使用 .data?之所以这样设置,是因为运输页面只关心 .shipping,而最终页面需要 .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;
}
}
}]);
})();
最佳答案
让事情变得更简单的一个建议是将数据模型与方法分开。并且无需尝试在同一个工厂中保留对同一个对象的多个引用。例如 ng-model="checkoutModule.data.shipping.firstName"
没有任何问题。是不是比较啰嗦是的。这是错的吗?没有。
所以也许是这样的
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: {}
};
}]);
为您的数据和
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;
}
}
}]);
对于将它们联系在一起的工厂。
关于javascript - AngularJS 服务父级单独引用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31797217/