вид не обновляя в угловых

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

Добавить $scope.$apply(); после вызова ajax.

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

Answer 2

Обновления массив $ scope.cartData удаления удаленной друг от метода успеха

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

Answer 3

При работе с $ объемом в угловых вы столкнетесь с этой проблемой, когда вы перезаписать объект на $ объеме (в отличие от модификации свойств этого объекта). Как уже упоминалось, $ scope. $ Apply() заставит Angular переоценить все ваши привязки и заставит ваш пользовательский интерфейс обновиться. Тем не менее, обращение к вашему API для получения всего содержимого тележки после операции удаления кажется очень неэффективным. Вы либо хотите отправить обратно 200 OK и использовать это как триггер, чтобы знать, что безопасно удалять клиентскую часть элемента с помощью сплайсинга. Другой вариант - отправить новое содержимое корзины в качестве тела вашего 200 OK после успешного удаления и, по крайней мере, сэкономить дополнительную поездку туда и обратно.

Answer 4

Добавить $ scope. $ Apply() в конец вашего вызова. Это запустит цикл углового дайджеста и обновит ваше представление.