在 AngularJS 中调用 Ajax 后不更新视图？

Question

我正在调用 get 方法，但视图没有更新。我试过alert()，它可以正确显示数据。

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope) 
{
    $.get( "people/allNumberOfuser", function( data )
    {
        $scope.testValue =data.message;
        alert(data.message);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="test">
    <p ng-controller="TestCtrl">
        {{testValue}}
    </p>
</div>

我是 AngularJS 的新手。提前致谢。

Answer 1

JQuery get 回调方法无法通过 Angular 检测，因为它在 Angular 之外，因此需要使用 $scope.$apply() 通知 Angular 任何更新

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope) 
{
   jQuery.get( "/People/GetNumberOfUser", function( data )
   {
       $scope.testValue =data.message;
       $scope.$apply() ;
       alert(data.message);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="test">
<p ng-controller="TestCtrl">
{{testValue}}
</p>
</div>

你可以使用 angular $http 代替 jquery 然后不需要$scope.$apply()

var app = angular.module('test', []);

app.controller('TestCtrl', function ($scope) 
{
    $http({
      method: 'POST',
      url: '/People/GetNumberOfUser'
    }, function( data )
    {
       $scope.testValue =data.message;
       alert(data.message);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="test">
<p ng-controller="TestCtrl">
{{testValue}}
</p>
</div>