无法从AJAX调用中设置的角度范围的变量 [英] Cannot set Angular scope variable from within ajax call

问题描述

var req = {
            "RequestId": $scope.$parent.req_id,
            "RequestDate": new Date(),
            "RequestDetails": $scope.$parent.details
        };

$scope.req_result = "test";

$.ajax({
            type: "POST",
            url: 'http://localhost:49358/api/myClasses/PostRequest',
            data: JSON.stringify(req),
            contentType: "application/json;charset=utf-8",
            processData: true,
            success: function (data, status, xhr) {
                console.log("The result is : " + status);
                $scope.req_result = "Post succeeded";
            },
            error: function (xhr) {
                $scope.req_result = "ERROR: " + xhr.responseText
            }
        });

范围变量$ scope.req_result不被设置，所以当我试图将其显示在HTML视图页面上：

The scope variable $scope.req_result does not get set so when I attempt to display it on the html view page:

<span>{{req_result}}</span>

它显示的默认值。不知怎的，Ajax做什么做的是不知道的角

it displays the default value. Somehow what ajax is doing is not known to angular

推荐答案

您忘记调用 $范围启动消化周期。$适用（）修改后，从无棱角的上下文范围的变量。

You forgot to initiate the digest cycle by calling $scope.$apply() after you modify the scope variable from non-angular context.

success: function (data, status, xhr) {
    $scope.req_result = "Post succeeded";
    $scope.$apply();
},
error: function (xhr) {
    $scope.req_result = "ERROR: " + xhr.responseText
    $scope.$apply();
}

角创建所谓确实神奇的视图更新观察家。当你为范围的变量 {{} someScopeVariable} ，角是创建观察者。就像当你编程创建做一个观察者

Angular does the magical view updates by creating something called "watchers". When you do {{ someScopeVariable }}, Angular is creating watcher for that scope variable. Just as when you programmatically create a watcher by doing

$scope.$watch('someScopeVariable', function myListenerFunction() {
    // When someScopeVariable changes, do this
});

看守人去手牵手与一些所谓的消化周期。从内部角度，例如不同的地方$超时回调，或$ http.then（）回调等，角调用从$ rootScope摘要周期。这基本上是经历范围内的所有的观察家，如果被监视值发生了变化，就像调用监听功能的 myListenerFunction 的上方。

Watchers go hand-in-hand with something called digest cycle. From different places within Angular, e.g. $timeout callback, or $http.then() callback etc., Angular invokes the digest cycle from the $rootScope. This is basically going through all the watchers in the scope and if the value being watched has changed, invoke the listener function like the myListenerFunction above.

重要的是角被触发此内部消化周期。所以，当你使用jQuery的从$阿贾克斯（），你缺少这一点。你改变，因为你这样做是被监视的范围变量

Important thing is Angular is triggering this digest cycle internally. So, when you use $.ajax() from jQuery, you are missing this. You change the scope variable that are being watched because you did

{{req_result}}

{{req_result}}

不过，观察家不知道这件事。 $范围。$适用（）确保所有的观察家知道用从根开始的范围摘要周期这一变化。

but, no watchers know about it. $scope.$apply() makes sure all the watchers know about this change by initiating a digest cycle from the root scope.

BUT

有一个更好的解决您的问题是使用它可以用来做XHR请求和角度自动触发，当您的回调函数被调用消化周期角的内部$ HTTP服务。

A better solution to your issue would be to use Angular's internal $http service which can be used to make XHR request and Angular automatically triggers digest cycle when you callback functions are invoked.

var req = {
            "RequestId": $scope.$parent.req_id,
            "RequestDate": new Date(),
            "RequestDetails": $scope.$parent.details
        };

$scope.req_result = "test";

$http
    .post('http://localhost:49358/api/myClasses/PostRequest', req)
    .then(
        function () {
            $scope.req_result = "Post succeeded";
        }, 
        function () {
            $scope.req_result = "ERROR";
        }
    );

这篇关于无法从AJAX调用中设置的角度范围的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！