Question

我在AngularJs中实现无限滚动。下面的函数在成功的AJAX调用时被调用，该调用发生在：

用户滚动到屏幕的末尾。
选择一些过滤器，点击＆＃34;搜索＆＃34;按钮。

在第一种情况下，从AJAX调用获取的数据将附加到现有列表中。在第二种情况下，我打算完全清空列表中的任何现有数据，并显示新数据。这是我的代码：

$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返回。在scroll-event中，数据被提取并附加到现有列表中，如预期的那样。有人可以告诉我我可能做错了什么吗？谢谢！

这是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);
      }
 });
}

Answer 1

尝试使用AngularJS提供的http。

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

这是一种很好的做法，它可能会解决您不更新视图的问题。

在AngularJS中查看未更新

1 个答案: