视图未在Angular中更新

Question

问题问题，

我的购物车上有删除方法，因此当我按Delete按钮时，它会删除其中的项目。 但是我的看法没有得到更新，而项目已被成功删除。

//购物车控制器

(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

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

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

Answer 2

当在$ scope中使用$ scope时，当您覆盖$ scope上的对象（而不是修改该对象的属性）时，会遇到此问题。 如前所述，$ scope。$ apply（）将强制Angular重新评估所有绑定，并导致UI更新。 话虽这么说，在删除操作之后调用API以获取购物车的全部内容似乎效率很低。 您要么要发回一个空的200 OK，然后将其用作触发器，以了解使用拼接器删除项目客户端是安全的。 另一种选择是在成功删除之后，将新购物车的内容作为200 OK的正文发送出去，至少可以节省一次额外的往返路程。

Answer 3

将$ scope。$ apply（）添加到调用结束。 这将运行角度摘要循环并更新您的视图。

Answer 4

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

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