Question

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

重要提示：我需要绑定才能工作2种方式。因此，当用户更改信息时，我的表单上的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

您永远不会在工厂内设置运输变量。您可以使用getter / setter来完成此任务：

<强>工厂

(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

为了使这与双向数据绑定一起使用，我必须从我的控制器引用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);
                    });
            }
        }
    });
})();

服务对象未从控制器更新

3 个答案: