AngularJS 服务丢失数据

Question

我有 4 个指令，都访问同一个服务 'checkoutData'。前 3 个指令使用数据（运输和账单信息）加载 checkoutData 服务。当我调试时，我可以看到它们共享同一个实例，因为所有 3 个都存在数据。第 4 条指令 (continueCheckout) 负责确保所有数据在执行其他操作之前有效。问题是 checkoutData 服务数据随后为空。我可以在 checkoutData 的第一行设置断点，可以看到它只被调用一次，所以我知道只有一个实例。发生什么事了？

继续结帐指令

(function() {
    angular.module('checkoutApp').directive('continueCheckout', function() {
        return {
            restrict: 'E',
            scope: {
                'nextStep': '@',
                'buttonText': '@'
            },
            template: '<a href ng-click="validate()"><button type="submit" class="btn btn-default">{{buttonText}}</button></a>',
            controller: function ($scope, $location, $log, checkoutData) {
                checkoutData.printData();
                $scope.validate = function () {
                    checkoutData.printData();
                    if (checkoutData.isValid()) {
                        $location.path("/" + $scope.nextStep);
                    }
                }
            }
        }
    });
})();

checkoutData.js

(function() {
    angular.module('checkoutApp').factory('checkoutData', ['$log', function($log) {
        var data = {
            shippingOptionId: null,
            billingOptionId: null,
            shipping: {},
            billing: {}
        };
        var inputForms = [];
        var printData = function () {
            $log.debug(JSON.stringify(inputForms));
            $log.debug(JSON.stringify(data.shipping));
            $log.debug(data.shippingOptionId);
        };
        var isValid = function() {
            printData();
            return false;
            //return _.every(data.inputForms, function(form) { return form.valid });
        };
        return {
            shipping: data.shipping,
            setValid: function(formName, valid) {
                inputForms[formName].valid = valid;
            },
            initializeForm: function(formName) {
                inputForms[formName] = {};
            },
            isValid: isValid,
            printData: printData
        }
    }]);
})();

ShippingOptions.js（有效指令之一，可以查看结帐数据）

(function() {
    angular.module('checkoutApp').directive('shippingOptions', function() {
        return {
            restrict: 'E',
            templateUrl: 'Scripts/Checkout/ShippingOptions/shippingOptions.html',
            controller: function ($scope, $log, shippingOptionsService, checkoutData) {
                $scope.selectedShippingOption = {};
                $scope.checkoutData = checkoutData;
                checkoutData.initializeForm('shippingOptions');
                $scope.$watch('shippingOptionsForm.$valid', function (newVal) {
                    checkoutData.setValid('shippingOptions', newVal);
                });
                $scope.$watch('selectedShippingOption', function (newVal) {
                    checkoutData.selectedShippingId = newVal;
                });
                $scope.shippingOptions = [
                    { id: 1, name: 'UPS Ground', cost: '11.32', display: 'UPS Ground (.32)', moreInfo: 'ups ground more info' },
                    { id: 2, name: 'UPS 3 Day', cost: '17.92', display: 'UPS 3 Day (.92)', moreInfo: 'ups 3 day more info' },
                    { id: 3, name: 'UPS 2 Day', cost: '20.76', display: 'UPS 2 Day (.76)', moreInfo: 'ups 2 day more info' }
                ];
            }
        }
    });
})();

Answer 1

问题是 isValid 函数将 data.inputForms 视为一个数组。它作为关联对象（键值集合）加载，因此无法使用 .forEach 对其进行迭代。这是 isValid()

的工作代码

var isValid = function () {
    for (var key in data.inputForms) {
        if (data.inputForms.hasOwnProperty(key)) {
            if (!data.inputForms[key].valid) {
                return false;
            }
        }
    }
    return true;
};

AngularJS 服务丢失数据

AngularJS services loses data

angularjs

angularjs-directive

angularjs-service