2017-08-20 20 views
0

AngularJsで無限スクロールを実装しています。以下の関数は、成功したAJAX呼び出しで呼び出されます。AngularJSで更新されないビュー

  1. ユーザーが画面の最後までスクロールします。
  2. いくつかのフィルタを選択し、「検索」ボタンを押します。

最初のケースでは、AJAX呼び出しからフェッチされたデータが既存のリストに追加されます。 2番目のケースでは、リスト内の既存のデータを完全に空にして新しいデータを表示するつもりです。ここではそれを行うには、私のコードは次のとおりです。

ので
$scope.successCallBack=function(data){ 
$('#spn-model-buffering-image').hide(); //hide the loading spinner icon 
if($scope.providersList === null) { 
    $scope.providersList = []; /* init if null */ 
} 
if($scope.scrolled === 'true'){ 
/*If it was an scroll-end event, then simply append the new data to the existing one*/ 
Array.prototype.push.apply($scope.providersList, JSON.parse(data.serviceproviderlist)); //push the new data to the existing list 
} 
else{ 
/*If the user clicks on "Search Providers" button, then new data are fetched, and occupy the entire list view*/ 
$scope.providersList=[]; 
$scope.providersList=JSON.parse(data.serviceproviderlist); 
} 
viewToBeDisplayed(LIST_VIEW); 
$scope.scrolled='true'; 

}

、成功したAJAX呼び出しの後、上記のメソッドが呼び出されます。バッファリングされたイメージを隠し、変数scrolledがtrueに設定されているかどうかを確認します。 「はい」の場合、イベントはボタンクリックではなく、ユーザーが画面の最後に達したため、データを追加する必要があります。それ以外の場合は、ユーザーがボタンをクリックしたため、データを新しく表示する必要があります。

これは、ボタンクリックイベントで呼び出される関数です。

$scope.getFilteredData=function(){ 
$scope.scrolled='false'; 
$scope.getMoreData(); 
} 

私の問題:ビューは更新されません。 AJAX呼び出しはJSONとしてデータを返します。スクロールイベントでは、期待通りにデータがフェッチされ、既存のリストに追加されます。 私が間違っていることを誰かに教えてもらえますか?ありがとう!ここで

は、AJAX呼び出しコードです:

$scope.getMoreData=function(){ 
    $('#spn-model-buffering-image1').show(); //while the data are being fetched, display the loading spinner 
    $scope.updateAjaxData(); //update AJAX data: pagekey, category, and reftag 
    var url=$scope.getURL(); 
    A.ajax(url, { 
     method: 'post', 
     params: AJAX_DATA, 
     success: function(data, s, x) { 
      $scope.successCallBack(data); 
     }, 
     error: function(xhr, statusText, errorThrown) { 
      $scope.errorCallback(xhr); 
     } 
}); 
} 
+0

'ajax'呼び出しの代わりに' http'サービスを試してみてください。 '$ scope.successCallBack(data);の後に' scope。$ applay() 'を使用してください。角度のjqueryコードを使うのは良くありません。 –

+0

スコープを使用しています。$ apply()が機能していないようです。 –

答えて

0

はAngularJSが提供するHTTPを使用してみてください。

$http.get('/someUrl', config).then(successCallback, errorCallback); 

これは良い方法であり、おそらくビューを更新しないという問題を解決します。

関連する問題