[英]Why AngularJs' view is not updating after an asynchronous Ajax call?
Why the view is not updated to "Someone"? 为什么视图没有更新为“某人”?
var app = angular.module('Async', []); app .controller('MainController', function($scope) { $scope.user = { name: "No one" }; jQuery.ajax("/" , { async: true, type: "POST", } ).always(function() { $scope.user.name = "Someone"; alert($scope.user.name); }); }); angular.bootstrap(document, ['Async']);
<div data-ng-controller="MainController"> <div data-ng-view="">User's name: {{ user.name }}</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
When you are doing asynchronous calls like this outside of the angular world, you need to inform angular of any changes that you've made. 当您在角度世界之外进行此类异步调用时,您需要通知角度您所做的任何更改。 There are a couple ways to fix this problem:
有几种方法可以解决此问题:
First Option: Run $scope.$apply() within your callback to inform angular you are changing things: 第一个选项:在你的回调中运行$ scope。$ apply()来告知angular你正在改变的事情:
jQuery.ajax("/"
, {
async: true,
type: "POST",
}
).always(function() {
$scope.apply(function() {
$scope.user.name = "Someone";
alert($scope.user.name);
})
});
Second Option (preferred): Replace the jQuery.ajax
call with angular's built-in $http
, which will take care of the $apply step for you: 第二个选项(首选):使用angular的内置
$http
替换jQuery.ajax
调用,它将为您处理$ apply步骤:
app
.controller('MainController', function($scope, $http) {
$scope.user = {
name: "No one"
};
$http({
method: 'POST',
url: '/'
}, function(successResponse) {
$scope.user.name = successResponse.data.name;
alert($scope.user.name);
});
});
You use jquery instead of angular $http service to make ajax request, so you should manually call $scope.$apply() after scope changes. 您使用jquery而不是angular $ http服务来发出ajax请求,因此您应该在范围更改后手动调用$ scope。$ apply()。
var app = angular.module('Async', []); app .controller('MainController', function($scope) { $scope.user = { name: "No one" }; jQuery.ajax("/" , { async: true, type: "POST", } ).always(function() { $scope.user.name = "Someone"; $scope.$apply(); alert($scope.user.name); }); }); angular.bootstrap(document, ['Async']);
<div data-ng-controller="MainController"> <div data-ng-view="">User's name: {{ user.name }}</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
The problem is that your ajax handler is running outside AngularJS. 问题是你的ajax处理程序在AngularJS之外运行。 You can replace your
jQuery
ajax call by AngularJs $http
or use $scope.$apply (see: https://docs.angularjs.org/api/ng/type/$rootScope.Scope ) 你可以用AngularJs
$http
替换你的jQuery
ajax调用,或者使用$ scope。$ apply(参见: https : //docs.angularjs.org/api/ng/type/$rootScope.Scope )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.