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

据我所知，除了使用类似以下内容之外，无法设置 data.shipping 的值：

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

这将导致 checkoutData.shipping 指向一个新对象，并且 checkoutData.shipping 将 return 该对象：

{"country" : "Sweden"};

但是 checkoutData.data 将 return 原始空 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 服务父级单独引用

AngularJS service parent separate reference

javascript

angularjs

angularjs-service