在Angular函數中調用AJAX

Question

在這段代碼中，我有2個$ http函數的問題。

$scope.buttonClick = function(){ 
    // Send input data 
     $.post('lib/add_contact.php', $scope.contact, function(data){ 
      data = angular.fromJson(data); 
      if(!data.error){ 
       $scope.contact = ""; 
       console.log('success'); 
      }else{ 
       console.log('error'); 
      } 
     }); 

    // Next Code 
    console.log('Next Code'); 
} 

第一個問題是，當我想清除聯繫人時，它不會立即工作，而只是在我按下輸入鍵之後。 如果我把

$scope.contact = ""; 

以外的POST，它運作良好。

第二個問題是，爲什麼POST被稱爲last？輸出代碼是

Code Next 
success 

，但我想這是輸出

success 
Code Next 

感謝思路和答案。

Answer 1

您正在使用jQuery調用在角度世界以外發生的ajax調用。您需要觸發摘要循環以更新範圍，以便更改反映在您的視圖中。

要解決此問題：

$scope.buttonClick = function(){ 
    // Send input data 
     $.post('lib/add_contact.php', $scope.contact, function(data){ 
      data = angular.fromJson(data); 
      if(!data.error){ 
       $scope.$apply(function(){ //<-- calling $apply() 
        $scope.contact = ""; 
       }); 
       console.log('success'); 
      }else{ 
       console.log('error'); 
      } 
     }); 

    // Next Code 
    console.log('Next Code'); 
} 

但是首選的方法是使用內置的包括的角度，其知道的角度，並自動觸發摘要內部$http服務。

使用$http（不要忘記作爲依賴添加到您的控制器）

$scope.buttonClick = function() { 
    $http.post('lib/add_contact.php', $scope.contact).success(function(data) { 
     data = angular.fromJson(data); 
     if (!data.error) { 
      $scope.$apply(function() { //<-- calling $apply() 
       $scope.contact = ""; 
      }); 
      console.log('success'); 
     } else { 
      console.log('error'); 
     } 
    }); 
}