Angularjs 服务对象未从控制器更新

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

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

指示

(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);
                    });
            }
        }
    });
})();

---

为什么不使用简单的语法

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();
});

---

为什么不使用简单的语法

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();
});

---

您从未在工厂内设置装运变量。您可以使用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);

---

您从未在工厂内设置装运变量。您可以使用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);

---

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

（函数（）{
angular.module（'checkoutApp'）。指令（'shippingInformation'，函数（）{
返回{
限制：'E'，
templateUrl:'Scripts/Checkout/ShippingInformation/ShippingInformation.html'，
控制器：功能（$scope、$log、shippingInformationService、checkoutData）{
$scope.checkoutData=checkoutData；为了让它与双向数据绑定一起工作，我必须从我的控制器中引用checkoutData，从我的模板中引用checkoutData.SHIPING.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);
                    });
            }
        }
    });
})();

（函数（）{
angular.module（'checkoutApp'）。指令（'shippingInformation'，函数（）{
返回{
限制：'E'，
templateUrl:'Scripts/Checkout/ShippingInformation/ShippingInformation.html'，
控制器：功能（$scope、$log、shippingInformationService、checkoutData）{
$scope.checkoutData=checkoutData；您需要使$scope.shipping对象上带有shipping属性。否则，您只是将值复制到作用域中，并且在更新时，它不会更新基础服务对象。请尝试$scope.checkoutData=checkoutData，然后绑定到该对象上的shipping属性。shipping是一个o对象，这就是为什么我认为这会起作用。但您是对的，设置$scope.checkoutData=checkoutData；是正确的。您需要使$scope.shipping对象具有shipping属性。否则，您只是将值复制到作用域中，当它被更新时，它不会更新基础服务对象。请尝试$scope.checkoutData=checkoutData，然后绑定到该表单上的shipping属性。shipping是一个对象，这就是为什么我认为这会起作用的原因。但是你是对的，设置$scope.checkoutData=checkoutData；是一种方法。但是这种绑定有两种方法吗？这就是我在这个表单上需要的。是的。在控制器中，你将调用factory fun您将传递$scope…到多个屏幕，您也可以传递数据。最后通过服务提交到服务器。但这种绑定会以两种方式工作吗？这就是我在这个表单上需要的。是的。在您将调用工厂函数的控制器中，您将传递$scope…到多个屏幕，您也可以传递数据。最后提交到服务器通过服务。