服务对象未从控制器更新

Question

我有一个包含客户发货信息的指令 (shippingInformation)。此信息在指令之外使用，并在多个屏幕上使用，因此我想将数据保留在服务中，直到最终提交给服务器。但是，下面的代码始终将 checkoutData.shipping 显示为空对象。

重要提示：我需要绑定以两种方式工作。所以当用户更改信息时，我表单上的 ng-model 应该更新服务中的值。

指令

(function () {
    angular.module('checkoutApp').directive('shippingInformation', function () {
        return {
            restrict: 'E',
            templateUrl: 'Scripts/Checkout/ShippingInformation/shippingInformation.html',
            controller: function ($scope, $log, shippingInformationService, checkoutData) {
                $scope.shipping = checkoutData.shipping;
                shippingInformationService.getDefault()
                    .then(function (success) {
                        $scope.shipping = success.data;
                        $log.debug(checkoutData.shipping);  // <-- this is null
                    }, function (error) {
                        $log.error(error);
                    });
            }
        }
    });
})();

服务

(function() {
    angular.module('checkoutApp').factory('checkoutData', function() {
        var data = {
            shipping: {},
        };
        return {
            shipping: data.shipping
        }
    });
})();

Answer 1

为什么不使用简单语法

app.factory("factoryname", function() {
    var data = null;
    return {
        setData: function(someData) {
            data = someData;
        },
        getData: function() {
            return data;
        }
    }
});

并在控制器中

app.controller("myCtrl", function($scope, shared) {
    $scope.data = shared.getData();
});

Answer 2

您永远不会在工厂内设置运输变量。您可以使用 getters/setters 来完成此操作：

工厂

(function() {
    angular.module('checkoutApp').factory('checkoutData', function() {
        var data = {
            shipping: {},
        };
        return {
            getShipping: function () {
              return data.shipping;
            },
            setShipping: function (obj) {
              data.shipping = obj;
            }
        }
    });
})();

控制器

.then(function (success) {
  $scope.shipping = success.data;
  checkoutData.setShipping($scope.shipping);
  $log.debug(checkoutData.shipping);

Answer 3

为了让它与 2 路数据绑定一起工作，我必须从我的控制器中引用 checkoutData 并从我的模板中引用 checkoutData.shipping.field。

控制器：

上一个：$scope.shipping = checkoutData.shipping

更正：$scope.checkoutData = checkoutData

HTML 更改：

上一个：ng-model='shipping.lastName'

更正：ng-model='checkoutData.shipping.lastName'

不确定是否有更简洁的方法，但这就是我使用双向绑定所能得到的全部。

(function () {
    angular.module('checkoutApp').directive('shippingInformation', function () {
        return {
            restrict: 'E',
            templateUrl: 'Scripts/Checkout/ShippingInformation/shippingInformation.html',
            controller: function ($scope, $log, shippingInformationService, checkoutData) {
                $scope.checkoutData = checkoutData; <!-- set scope to the service rather then the object contained within
                shippingInformationService.getDefault()
                    .then(function (success) {
                        checkoutData.shipping = success.data; <!-- set the value in the service
                    }, function (error) {
                        $log.error(error);
                    });
            }
        }
    });
})();

服务对象未从控制器更新

Service object not updating from controller

angularjs

angularjs-directive

angularjs-service