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:
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:
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);
});
});