Datenbindung funktioniert nur beim zweiten Klick-Ereignis

Question

Ich habe ein Click-Ereignis, um die AngularJS-Funktion aufzurufen, die die Daten aus SQL abruft und zum Ajax-Aufruf zurückkehrt. Mein Problem ist, die Daten, die auf dem zweiten nur bindet mit ng-repeat abgerufen klicken event.Here mein Code,

`

(function (app) { 
    app.controller("OnvioController", function ($scope,$http, OnvioService) { 
     $scope.retData = []; 
     $scope.getResult = function() { 

      var serviceURL =window.location.origin+ '/Datafetching/dataFetch'; 

      $.ajax({ 
       type: "POST", 
       url: serviceURL, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(data, status) { 
        $scope.retData = data; 
       }, 
       error: function (status) { 

       } 
      }); 
     } 

    }); 
}(angular.module("OnvioModule"))); 

`

Answer 1

Verwenden Sie nicht $.ajax in angularJS.

Sie können dies tun, indem $http.get

Ich habe es nicht versucht jetzt mein Selbst. aber es sollte in deinem Fall funktionieren.

(function (app) { 
    app.controller("OnvioController", function ($scope,$http, OnvioService) { 
     $scope.retData = []; 
     $scope.getResult = function() { 

      var serviceURL =window.location.origin+ '/Datafetching/dataFetch'; 

      $http.get(serviceURL).success(function(response) { 
       $scope.retData = response; 
      }); 
     } 

    }); 
}(angular.module("OnvioModule"))); 

siehe this Dokument für weitere Details

Answer 2

Verwenden $ http.post statt $ .ajax.

Wenn Sie weiterhin $ .ajax verwenden möchten, fügen Sie einen $ scope. $ Apply() in Ihre Erfolgsfunktion ein. Dadurch wird die Winkelschleife ausgelöst, um nach Änderungen außerhalb seines Kontexts zu suchen. Dies liegt daran, dass $ .ajax außerhalb von eckigen Objekten ausgeführt wird.

Answer 3

einen $ Rahmen hinzufügen. $() In der Erfolgsfunktion anwenden.