javascript - 调用 $scope.$apply 时 AngularJS View 不更新

Question

工作流程如下:

用户的帐户页面应列出该用户拥有的所有对象。

每个对象旁边都有一个“删除”按钮，用于打开 Bootstrap 模式。模态框询问用户是否真的要删除对象，如果他们确认，则模态框应该关闭，对象应该被删除， View 应该更新以反射(reflect)删除。

我在模态框内的确认按钮上使用 data-dismiss 属性关闭模态框。

这是我的 Controller 中删除对象和(应该)更新 View 的函数:

 $scope.deleteObject = function(object) {
    object.destroy({
      success: function(object) {
        $scope.$apply();
      }, 
      error: function(object, error) {
        // handle error
      }
    });
  };

但是，我必须刷新页面才能看到删除了对象的更新 View 。

还有其他方法可以使用 $scope.$apply 吗？

编辑:我通过创建一个新的 $scope 级别函数来加载我的对象集合找到了解决方法。以前，这是在加载 Controller 时完成的(不附加到任何特定功能。

换句话说，我的旧代码是这样做的:

.controller('AccountCtrl', function($scope) {
  var query = new Query('Object');
  query.find().then(function(objects) {
    $scope.objects = objects;
  });

  $scope.deleteObject = function(object) {
    object.destroy({
      success: function(object) {
        // do something
      }
    });
  }
});

现在我已经将 find 代码包装在一个 $scope 级函数中，我可以在对象被销毁时显式调用它:

.controller('AccountCtrl', function($scope) {
  $scope.getObjects = function() {
    var query = new Query('Object');
    query.find().then(function(objects) {
      $scope.objects = objects;
    });
  }

  $scope.getObjects(); // call when the view loads

  $scope.deleteObject = function(object) {
    object.destroy({
      success: function(object) {
        $scope.getObjects(); // call again when an object is deleted
      }
    });
  }
});

我仍然希望有一个更干净的解决方案，即我不必通过对象集合手动更新的解决方案。

Answer 1

要成功，您必须修改本地 $scope.objects。

在你上一个例子中你应该试试这个(代码没有测试，但它应该是这样的):

$scope.deleteObject = function(object) {
    object.destroy({
      success: function(object) {
        var objectIndex = $scope.objects.indexOf(object);
        $scope.objects.splice(objectIndex,1);
      }
    });
  }

在您的 Controller 中，您负责更新您的模型。 Angular 负责更新 View 。再次调用 $scope.getObjects() 是一种方法。但更简洁的方法是在成功的情况下实现模型更新。如果服务器响应出错，您还应该提供错误方法。

如果您已正确地将集合绑定(bind)到您的 View ，我应该在删除后进行更新。告诉我它是否对您有帮助。