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が戻ったときにタスクの2番目のコピーが追加されます。ですから、私がやりたいのは、2番目のコピーが追加されたらすぐに最初のコピーを削除することです。

私はそれをする方法を見つけることができないようです。それとも私のアプローチはすべて間違っていますか？（私は認めます、アプローチは少しハックのように感じるので、私は提案を受け入れます）。

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 に答える