Question

问题问题，

我的购物车上有一个删除方法，所以当我按下删除按钮时，它会删除它的项目。但我的观点是没有获得更新，而项目已成功删除。

//购物车控制器

(function() {
    var cartController = function($scope,cartService,NotificationService) {

        getCart();
        function getCart() {
            cartService.getCart()
                .success(function (cart) {
                    if (cart != null || cart != 'undefined') {
                        $scope.cartData = cart;
                        console.log(cart)
                    }
                })
                .error(function (status, data) {
                    console.log(status);
                    console.log(data);
                })
        };


        $scope.deleteItem = function (productID) {
            cartService.deleteCartItem(productID)
                .success(function () {
                    NotificationService.add("success", "Item deleted from the cart", 3000);
                    getCart();
                })
                .error(function (status, data) {
                    console.log(status);
                    console.log(data);
                })
        }

        cartController.$inject = ['$scope', 'cartService', 'NotificationService'];
        angular.module('cartApp').controller('cartController', cartController);

    }

}（））;

//我的观点

   <div class="mainContainer" ng-controller="cartController">
     <tr ng-repeat="cart in cartData.carts" >
           <td>
                <button ng-click="deleteItem(cart.id)" class="btn btn-primary">Delete</button>
           </td>
    </tr>
  </div>

请指导我做错了什么。

Answer 1

在ajax调用后添加$scope.$apply();。

$scope.cartData = cart;
console.log(cart);
$scope.$apply();

Answer 2

在角度中使用$ scope时，在覆盖$ scope上的对象时会遇到此问题（而不是修改该对象的属性）。如前所述$ scope。$ apply（）将强制Angular重新评估所有绑定，并且应该导致UI更新。话虽这么说，调用你的API来获取删除操作后的购物车的全部内容在这里效率非常低。您要么发回一个空的200 OK，并将其用作触发器，以便知道使用splice删除项目客户端是安全的。另一个选择是在成功删除后将新购物车内容作为200 OK的正文发送，并至少为自己额外的往返行程。

Answer 3

在通话结束时添加$ scope。$ apply（）。这将运行角度摘要循环并更新您的视图。

Answer 4

更新$ scope.cartData数组，删除成功方法

上删除的数组

$scope.cartData.splice($scope.cartData.indexOf(productID), 1 );

视图不在Angular中更新

4 个答案: