AngularJS服务父单独参考

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

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

对于将这一切联系在一起的工厂。

Answer 2

据我所知，除了使用以下内容之外，没有其他方法可以设置 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