Question

这是工作流程：

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

每个对象旁边都有一个“删除”按钮，用于打开Bootstrap模式。模态询问用户是否真的想要删除对象，如果他们确认，那么模式应该被忽略，对象应该被删除，并且视图应该更新以反映删除。

我在模态内部的确认按钮上使用data-dismiss属性解雇模态。

这是我的控制器中删除对象并且（应该）更新视图的函数：

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

但是，我必须刷新页面以查看删除了对象的更新视图。

我应该使用其他方式$scope.$apply吗？

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

换句话说，我的旧代码做到了这一点：

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

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

如果您已将集合正确绑定到视图，我应该在删除后更新。告诉我它是否帮助了你。

调用$ scope。$ apply时，AngularJS视图不会更新

1 个答案: