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 回答