Question

我使用AngularJS服务来存储来自多个页面的数据，以便一起提交。请参阅下面的代码。

在我的Chrome控制台中，如果观察checkoutData.shipping，我会使用数据返回正确的对象。如果我观察checkoutData.data，我会得到一个空的物品，它的运输物品是空白的。

这些应该指向同一个对象，对吧？为什么它可以与.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;
            }
        }
    }]);
})();

Answer 1

从我所看到的，除了使用以下内容之外，无法设置data.shipping的值：

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

这将导致checkoutData.shipping指向新对象，checkoutData.shipping将返回该对象：

{"country" : "Sweden"};

但 checkoutData.data会返回原始的空shipping个对象，因为我们尚未更新该值。

如果您改为创建一个功能来设置checkoutData服务中的运费值：

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

并使用它来设置发货数据，您将从checkout.data和checkout.shipping获得所需的值。

看一下这个示例：jsfiddle

Answer 2

使事情变得简单的一个建议是将数据模型与方法分开。并且不需要尝试在同一工厂内保持对同一对象的多个引用。做例如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;
        }
    }
}]);

将工厂捆绑在一起的工厂。

AngularJS服务父级单独引用

2 个答案: