2017-08-20 1 views
0

Ich implementiere Unendlich-Scrolling in AngularJs. Die folgende Funktion wird bei einem erfolgreichen AJAX-Aufruf aufgerufen:Ansicht nicht aktualisieren in AngularJS

  • Der Benutzer scrollt zum Ende des Bildschirms.
  • Das wählt einige Filter aus und drückt den "Suchen" Knopf.
  • Im ersten Fall werden die vom AJAX-Aufruf abgerufenen Daten an die vorhandene Liste angehängt. Im zweiten Fall möchte ich alle vorhandenen Daten in der Liste vollständig leeren und die neuen Daten anzeigen. Hier ist mein Code, das zu tun:

    $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'; 
    

    }

    So, nach einem erfolgreichen AJAX-Aufruf, die obige Methode aufgerufen wird. Es blendet das Pufferabbild aus und überprüft, ob die Variable mit dem Namen scrolled auf true gesetzt ist. Wenn ja, bedeutet dies, dass das Ereignis nicht per Knopfdruck erfolgt, sondern der Benutzer das Ende des Bildschirms erreicht hat und daher Daten angehängt werden müssen. Sonst hat der Benutzer auf die Schaltfläche geklickt, und daher müssen Daten frisch angezeigt werden.

    Dies ist die Funktion, die auf den Button-Klick-Ereignis aufgerufen wird:

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

    Mein Problem: Ansichten nicht aktualisiert. Der AJAX-Aufruf gibt Daten als JSON zurück. Im scroll-Ereignis werden Daten wie erwartet abgerufen und an die vorhandene Liste angehängt. Kann mir jemand vorschlagen, was ich falsch machen könnte? Vielen Dank!

    Hier ist der AJAX-Aufruf Code:

    $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

    Verwenden Sie "HTTP" statt "AJAX" Anruf. oder benutze 'scope. $ applay()' nach '$ scope.successCallBack (data);' Es ist überhaupt nicht gut, jquery code in angular zu verwenden. –

    +0

    Verwenden von Bereich. $ Apply() scheint nicht zu funktionieren. –

    Antwort

    0

    Versuchen Sie, die http von AngularJS zu verwenden.

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

    Dies ist eine gute Übung und wird wahrscheinlich Ihr Problem lösen, die Ansicht nicht zu aktualisieren.

    Verwandte Themen