发布

Question

首先，是的，我确实看了其他答案，但他们没有为我做这个伎俩。

我目前正在开发基于angularJS的购物应用程序。在构建购物车，创建必要的功能和构建视图后，我想通过创建“无页面刷新”add_to_cart函数来优化“购物车”。因此，在使用$scope.push和init()之类的功能加载购物车功能后，我有点卡住了。购物车由以下代码构建：

购物车

$scope.getCartItems = function() {
    // Get the cart
    $http.get('config/cart/getCart.php', {cache: false}).then(function (response) {
        $scope.cartItems = [];
        $scope.cartItems = response.data.cartItems;
        $scope.totalCartItems = [];
        $scope.totalCartItems = response.data;
        $scope.selectedCustomer = [];
        $scope.selectedCustomer = response.data;
    });
};

添加产品

$scope.addToCart = function(product, stock_available) {
    var product_id = product.id;
    var product_name = product.name.language;
    var product_price = $('span[name="combinationTotalPrice' + stock_available.id + '"]').text();
    var product_size = $('span[name="product_attributes' + stock_available.id + '"]').text();
    var product_quantity = product.quantity;
    var product_id_attribute = stock_available.id_product_attribute;

    console.log(product_id_attribute);

    var request = $http({
        method: "post",
        url: "config/cart/getCart.php?action=addToCart",
        data: {
            product_id: product_id,
            product_name: product_name,
            product_price: product_price,
            product_size: product_size,
            product_quantity: product_quantity,
            product_id_attribute: product_id_attribute
        },
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
    $scope.cartItems.push(request);
};

通过单击按钮，所有数据都从视图中获取并传递给addToCart()函数。我检查了所有内容并插入了数据。刷新硬页面后，新产品将添加到购物车中。但是我想删除“硬页面刷新”并使用我上面尝试的内容：$scope.cartItems.push(request);。

更新

因此，在评论的一些提示后，我已经为购物车创建了一项服务。看一下更新后的代码：

cartService

myApp.service('cartService', ['$http',function ($http, $scope) {
    return {
        getCartItems: function() {
            return $http.get('config/cart/getCart.php', {cache: false})
        }
        // any other methods for http calls;
    }
}]);

cartController and function add

myApp.controller('CartController', function($http, $scope, cartService) {
    $scope.getTheCart = function() {
        cartService.getCartItems()
            .then(function(response) {
                $scope.cartItems = response.data.cartItems;
                $scope.totalCartItems = response.data;
                $scope.selectedCustomer = response.data;
            })
    };

$scope.addToCart = function(product, stock_available) {
        var product_id = product.id;
        var product_name = product.name.language;
        var product_price = $('span[name="combinationTotalPrice' + stock_available.id + '"]').text();
        var product_size = $('span[name="product_attributes' + stock_available.id + '"]').text();
        var product_quantity = product.quantity;
        var product_id_attribute = stock_available.id_product_attribute;

        console.log(product_id_attribute);

        var request = $http({
            method: "post",
            url: "config/cart/getCart.php?action=addToCart",
            data: {
                product_id: product_id,
                product_name: product_name,
                product_price: product_price,
                product_size: product_size,
                product_quantity: product_quantity,
                product_id_attribute: product_id_attribute
            },
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function() {
            $scope.getTheCart();
        });
    };
});

所以一切正常，我甚至可以在网络选项卡中看到新的getCart.php是使用新数据获得的。遗憾的是我的$scope和视图仍未更新。

更新2

所以我看了一下这个例子，我为自己尝试过一些东西。经过一些尝试后，我得出了一个非常奇怪的结论：使用ng-click refreshData操作通过以下函数刷新数据：

$scope.refreshData = function() {
    cartService.refreshData()
        .then(function(response) {
            $scope.cartItems = response.data.cartItems;
            $scope.totalCartItems = response.data;
            $scope.selectedCustomer = response.data;
        })
};

但直接调用此函数就像第一个答案中的例子一样（jsFiddle）=＆gt; fiddle不会刷新视图和$scope

$scope.addToCart = function(product, stock_available) {
    return cartService.addToCart(product, stock_available)
        .then(function(response) {
        console.log(response);
            $scope.cartItems = response.data.cartItems;
            $scope.totalCartItems = response.data;
            $scope.selectedCustomer = response.data;
        // call the get() function
        $scope.refreshData();
    })
};

如果您有任何疑问，请在评论中告诉我

PS：创建一个JSfiddle会让我回到很长一段时间，因为所有数据都是通过Prestashop webservice获得的

一如既往，提前致谢！

Answer 1

好像你正在使用错误的方法。所有http调用都应该来自服务，而不是来自控制器/组件。 尝试为此创建服务。 别忘了在控制器中注入服务。 所以毕竟会有像这样的东西

例如：

$scope.cartItems = [];
$scope.getCartItems = function() {
cartService.getCartItems()
  .then(response => {
    $scope.cartItems  = response.data; // or response
  })
}

根据文档注册服务并添加方法

return {
  getCartItems: function() {
    return $http.get('config/cart/getCart.php', {cache: false})
  },
  // any other methods for http calls;
}