javascript - Angular 尝试读取服务中的属性

Question

在下面的脚本中，我尝试从 cartDataService 访问数据，即使我设法从 cartDataService 读取 this.test，我得到的 cart_id 为空值。我知道这是由于javascript的异步特性 我非常确定在分配服务之前尝试从服务访问 cart_id，如何确保分配了服务的 cart_id？谢谢

var app = angular.module('myApp', [])

app.service('cartDataService', function () {
    this.cart_id = ""
    this.getcart_id = function(){ return this.cart_id};
    this.setcart_id = function(id){
        this.cart_id = id
    }
    this.test = "byebye"
})


app.controller('OrderDetailCtrl', ['$http', 'cartDataService', function ($http, cartDataService) {
    var self = this
    self.msg = 'Order Detail'
    self.order_id = outer_id
    self.orders = {
        get: function () {
            return $http.get('http://apimucommerce/api/order/' + self.order_id + '/')
                .then(function (response) {
                    return response.data
                })
        }
    }

    self.orders.get().then(function (data) {
        self.order = data
        self.cart_id = self.order.cart_id
        cartDataService.setcart_id(self.order.cart_id)
    })

}])

app.controller('CartController', ['cartDataService', function (cartDataService) {

    var self = this

    self.cart_id = cartDataService.getcart_id()
    alert(cartDataService.cart_id)
    self.msg = cartDataService.test
}])

Answer 1

你可以使用这个:

app.controller('CartController', ['$scope', 'cartDataService', function  ($scope, cartDataService) {
    var self = this
    $scope.$watch(
        function () watcher{
            return cartDataService.getcart_id();
        }, 
        function () onCardIdChanged{
            self.cart_id = cartDataService.getcart_id()
            alert(self.cart_id);
        }
    );
}]);

解决问题的另一种方法:

app.service('cartDataService', ['$q', function ($q) {
    var deffered = $q.defer();

    this.cart_id = "";
    this.getcart_id = function(){ 
        return deffered.promise; 
    };
    this.setcart_id = function(id){
        this.cart_id = id;
        deffered.resolve(;
    }
}]);

app.controller('CartController', ['$scope', 'cartDataService', function  ($scope, cartDataService) {
    var self = this;
    cartDataService.getcart_id().then(function (cardId) {
        self.cart_id = cartDataService.getcart_id()
        alert(self.cart_id);
    });
}]);

更新:

app.service('cartDataService', ['$q', function ($q) {
    var deffered = $q.defer();

    this.cart_id = "";
    this.getcart_id = function(){ 
        return deffered.promise; 
    };
    this.setcart_id = function(id){
        this.cart_id = id;
        deffered.resolve(id);
    }
}]);

app.controller('CartController', ['$scope', 'cartDataService', function  ($scope, cartDataService) {
    var self = this;
    cartDataService.getcart_id().then(function (cardId) {
        self.cart_id = cardId;
        alert(self.cart_id);
    });
}]);