보기가 각도로 업데이트되지 않음

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.cartData.splice($scope.cartData.indexOf(productID), 1); 

Answer 3

성공 방법에 삭제를 제거 $ scope.cartData 배열 (해당 객체의 속성을 수정하는 것과 반대). 앞에서 언급했듯이 $ apply()는 Angular가 모든 바인딩을 재평가하도록하고 UI를 업데이트해야합니다. 즉, 삭제 작업 후에 카트의 전체 내용을 가져 오기 위해 API를 호출하는 것은 여기서는 매우 비효율적 인 것처럼 보입니다. 빈 200 OK를 다시 보내고이를 스플 라이스를 사용하여 항목 클라이언트 측을 제거하는 것이 안전하다는 것을 알기위한 트리거로 사용하려고합니다. 다른 옵션은 성공적으로 삭제 된 다음 200 OK의 본문으로 새 장바구니 내용을 보내고 적어도 여분의 왕복을 저장하는 것입니다.

Answer 4

통화 끝 부분에 $ scope. $ apply()를 추가하십시오. 그러면 각도 다이제스트 루프가 실행되고보기가 업데이트됩니다.