javascript - AngularJS 范围仅有时刷新

Question

我有一个卡片列表，我从 API 中提取并使用 ng-repeat 显示在表格中。当我点击删除一条记录时，会弹出一个确认框，如果为真，则删除该记录并刷新整个表。 API 的响应符合我的预期，并且记录数量正确。但有时记录仍保留在 View 中。有时则不然。

这是 Controller :

angular.module("frontend").controller("AdminCardsCtrl", function($scope, auth, Card) {
  var getCards;
  auth.adminOnly();
  getCards = function() {
    Card.query({}, function(cards) {
      $scope.cards = cards;
    });
  };
  getCards();
  $scope.destroy = function(card) {
    var confirmation;
    confirmation = confirm('Are you sure?');
    if (confirmation) {
      Card.get({
        id: card.id_string
      }, function(card) {
        card.$delete();
        getCards();
      });
    }
  };
})

型号:

angular.module('frontend').factory('Card', function($resource, API_URL) {
  return $resource(API_URL + "/cards/:id.json", {
    id: '@id_string'
  }, {
    update: {
      method: 'PUT'
    }
  });
});

这是 View 依赖于 $scope.cards 的部分。

  <tr ng-repeat="card in cards">
    <td><a ng-href="/admin/cards/{{card.id_string}}">{{ card.name }}</a></td>
    <td>{{ card.category }}</td>
    <td><a ng-href="/admin/cards/{{card.id_string}}/edit">Edit</a> / <a ng-click="destroy(card)">Delete</a></td>
  </tr>

我可以尝试将单个记录从表中拼接出来，但这也需要更新表 strip 化，这就是为什么我想刷新整个内容。如果我从 getCards 函数执行 console.log ，它会在我加载页面和确认删除后运行。每次删除某些内容时重置 $scope.cards 是否不应该导致所有表行刷新？为什么会出现不一致的情况？

Answer 1

对资源调用 $delete 仅发送 HTTP 请求。如果您想从 View 中删除该项目，您必须自己执行此操作。

您可以尝试如下操作:

card.$delete(..., function() {
    $scope.card.splice(index, 1);
  });