Почему AngularJs не обновляется после асинхронного вызова Ajax?

Question

Почему представление не обновляется до «Кто-то»?

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>

Answer 1

Когда вы делаете асинхронные вызовы, как этот снаружи углового мира, вы должны сообщить угловую о любых изменениях, которые вы сделали. Есть несколько способов, чтобы исправить эту проблему:

Первый вариант:. Пробег $ Сфера $ применения() внутри обратного вызова, чтобы сообщить угловатые вы меняете вещи:

jQuery.ajax("/" 
    , { 
    async: true, 
    type: "POST", 
    } 
).always(function() { 
    $scope.apply(function() { 
    $scope.user.name = "Someone"; 
    alert($scope.user.name); 
    }) 
}); 

Второй вариант (предпочтительный): Заменить jQuery.ajax вызов с угловой встроенный в $http, который будет заботиться о $ применять шаг для вас:

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

Answer 2

проблема заключается в том, что ваш обработчик Ajax работает вне AngularJS. Вы можете заменить jQuery АЯКС вызов AngularJs $http или использование $ сферы $ применяется (см: https://docs.angularjs.org/api/ng/type/$rootScope.Scope).

Answer 3

Вы использовать JQuery вместо углового сервиса $ HTTP, чтобы сделать AJAX запроса, поэтому вы должны вручную вызвать $ объема. $ 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>