javascript - 在 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最后调用？代码的输出是

Code Next
success

但我希望输出是

success
Code Next

感谢您的想法和答案。

Answer 1

您正在使用 jQuery 进行 ajax 调用，该调用发生在 Angular 世界之外。您需要触发范围更新的摘要周期，以便更改反射(reflect)在您的 View 中。

要解决此问题:

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

但是，首选方法是使用 Angular 内部包含的内置 $http 服务，该服务了解 Angular 并自动触发摘要。

使用$http(不要忘记添加为 Controller 的依赖项)

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