Question

我有一张卡片列表，我从API中提取并使用ng-repeat显示在表格中。当我单击删除一个时，会弹出一个确认框，如果为true，则删除该记录并刷新整个表。 API正在按照我的预期进行响应，并且记录的数量正确。但有时记录仍然在视野中。有时它不会。

这是控制器：

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'
    }
  });
});

此处视图的一部分依赖于$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>

我可以尝试将单个记录拼接出表格，但这也需要更新表条带化，这就是为什么我只想刷新整个事情。如果我从console.log函数执行getCards，则在我加载页面时以及确认删除后它正在运行。每次删除某些内容时都不应重置$scope.cards导致所有表行都刷新？为什么会发生不一致？

Answer 1

只有在$ delete请求完成后才能获得新卡：

card.$delete(getCards);

Answer 2

在资源上调用$ delete仅发送HTTP请求。如果要从视图中删除该项，则必须自己完成。

您可以尝试以下内容：

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

AngularJS范围有时仅刷新

2 个答案: