Question

我目前正处于铁场计划的中间，本周我们搬到了Angular。我们上周做了Backbone，到目前为止，我认为Angular在它之前是跳跃式的。

我这两周只使用框架，所以整个MVC概念对我来说仍然有点模糊。从能够使用jQuery自由操作元素到必须经历一堆服务和控制器，对我来说是一个很大的改变。

这是我的项目的样子，它是一个基于Etsy API构建的非常基本的商店：

https://na2.docusign.net/restapi/v2/accounts/

请原谅任何布局问题/未经优化的代码，我们移动得非常快，所以我经常要等到我有空闲时间才能回来修改它。

我现在的主要问题是，在向购物车添加商品时，需要刷新页面。这会发生在标题中的购物车图标中显示的数字。每当您从购物车页面上的购物车中删除某个商品时，也会发生这种情况，这会让您感到非常沮丧。

然而，对于这个主题，我想主要关注让购物车中的号码实时更新，因为我可能能够将该代码应用于其他功能需要它。

这是我用于标题的视图。它应该已经在与购物车中的商品数量相关的行上：

http://claytonkinder.github.io/Kraftee/#/

这是与购物车相关的控制器：

https://github.com/ClaytonKinder/Kraftee/blob/gh-pages/views/header.html#L8

这是与购物车相关的服务/工厂：

https://github.com/ClaytonKinder/Kraftee/blob/gh-pages/js/controllers.js#L20

您可以在控制器中看到我尝试使用$ broadcast来解决问题，但我不知道如何将其应用到视图中。

如果您对代码的任何其他部分（HTML，CSS，JS等）有任何建议/提示，请随时分享。任何改进都是件好事。

Answer 1

以下方法

CartService.addToCart(product);
CartService.deleteFromCart(productId);

两者都进行HTTP调用，因此是异步。因此，在$rootScope.$broadcast('cart-scanned');或CartService.addToCart(product);返回之前，系统会调用CartService.deleteFromCart(productId);。

$scope.addToCart = function (product) {
    console.log('Item added.');
    CartService.addToCart(product);
    // called before the http called returns
    $rootScope.$broadcast('cart-scanned');
  };

  $scope.deleteFromCart = function (productId) {
    console.log('Item deleted.');
    CartService.deleteFromCart(productId);
    // called before the http called returns
    $rootScope.$broadcast('cart-scanned');
  };

使用承诺。 $q是角度服务。查看文档here。使用以下作为示例：

在services.js

    .factory('CartService', function ($http, $q) {
        //....
        var addToCart = function (product) {
            var deferred = $q.defer();
            console.log('Added to cart.');
            $http.post(url, product).success(function (resp) {
                console.log(resp);
                deferred.resolve(resp);
            }).error(function (err) {
                console.log(err);
                deferred.reject(err);
            });
            return deferred.promise;
        };

在controllers.js

    $scope.addToCart = function (product) {
      console.log('Item added.');
      CartService.addToCart(product).then(function () {
        $rootScope.$broadcast('cart-scanned');
      });
    };

    $scope.$on('cart-scanned', function () {
      CartService.getCart().success(function (cart) {
        $scope.cart = cart;
      });
    });

CartService.addToCart(product)将返回Promise，并且只有在http调用完成后才会调用then方法中传递的回调。

在模板中

    <div ng-controller="CartController" id="cartNumber">
      {{ cart.length }}
    </div>

cart引用$scope.cart，因此您必须将其更新为更新视图。

如果这不起作用，请告诉我。您可以对deleteFromCart使用相同的技术。

如何在我的Angular应用程序中实时更新购物车中的商品数量？

1 个答案: