3

用例：用户创建一个新任务，该任务必须通过 API 向上游发送。当该 API 返回成功时，我将其添加到显示范围。我可以正常工作：

$http.post('some_url', newtask).success(function(data) {
  $scope.tasks.push(data);
});

（newtask 是前面定义的一个简单对象，这里没有展示）。

问题是，API 很慢（虽然可靠），而我希望它感觉像一个实时应用程序。所以我想立即将新任务推送到 $scope，然后在 API 返回成功时将其替换为“真实”任务。所以我在上面加上：

$scope.tasks.push(newtask); // Add to UI immediately (provisionally)

现在发生的是立即添加新任务，然后在 API 返回时添加任务的第二个副本。所以我想做的是在添加第二个副本后立即删除第一个副本。

我似乎无法找到一种方法来做到这一点。还是我的方法全错了？（我承认，这种方法确实有点像 hack，所以我愿意接受建议）。

4

2 回答 2

2

在成功回调函数中，我建议您将新任务（从 API 返回）与任务数组中的最后一个任务进行比较。如果它们匹配，您无需执行任何操作。（如果它们不匹配，您需要删除最后一项并抛出某种错误指示。）

$http.post('some_url', newtask).success(function(data) {
   if($scope.tasks[$scope.tasks.length-1] === data) {
      // do nothing, we already added it before
   } else {
     ... error handling here
   }
});

如果用户一次不能添加多个任务（在 API 返回之前），并且您确实想删除然后添加，只需对数组使用正常的 JavaScript 操作删除最后一项，然后添加 API 值：

$http.post('some_url', newtask).success(function(data) {
    $scope.tasks.pop();
    $scope.tasks.push(data);
});

Angular 应该会注意到模型的变化并自动为您更新视图。

于 2013-01-12T02:42:19.757 回答
0 
//Push the new task immediately
$scope.tasks.push(newtask);

//When API return check for error if error just pop out the added task
$http.post('some_url', newtask).success(function(data) {
    if($scope.tasks[$scope.tasks.length-1] !== data) {
        $scope.tasks.pop();
    } 
});
于 2015-05-27T08:43:53.073 回答