AngularJS来自服务器的绑定响应在视图中没有更新

AngularJS binding response from server not updating in view

本文关键字：视图 更新 响应 服务器 绑定 AngularJS      更新时间：2023-09-26

我正在开发一个移动应用程序。我在尝试在视图中中继ajax调用后从服务器返回的消息时遇到了一个问题。这个想法是在用户点击"刷新"按钮后在视图中显示消息。

绑定没有完全像我希望的那样工作。它不会向用户显示当前消息，而是显示从以前单击刷新按钮收到的消息。因此，用户在加载视图后第一次单击按钮时，什么也没有发生……我不明白为什么视图更新不是即时的，而是只有当用户再次点击时才会改变。

下面是我的代码的简化版本:

HTML: 

<span ng-model="rec">{{rec}}</span>
<button ng-click="getNew()">
        Refresh
</button>
JavaScript: 

$scope.rec = window.localStorage.getItem('content');
$scope.getNew = function() {
    $.ajax({
        ...
        success: function(result, textStatus, xhr) {
            ...
            window.localStorage.setItem('content', result.content);
            $scope.rec = window.localStorage.getItem('content');
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            ...
        }
    });
};

我知道，自从视图更新以来，ajax调用每次都是成功的，但是在应该成功的时候晚了一步。提前感谢您的帮助!

ajax调用完成后没有摘要循环，因此视图不会更新。如果使用$http服务，而不是$.ajax服务。然后视图将被更新。

代码应该是这样的:

$http({method: 'GET', url: '/someUrl'}).
    success(function(data, status, headers, config) {
        window.localStorage.setItem('content', data);
        $scope.rec = data;
    }).
    error(function(data, status, headers, config) {
      ...
    });

当然你必须注入$http到你的控制器

当然!你必须使用Angular的$http服务。

阅读这篇文章

为了执行http调用，理想情况下您需要为这种场景创建一个工厂。默认情况下，实现http的工厂将返回一个承诺，你可以在这个承诺上更新你的作用域变量。

factory的语法为:

myapp.factory('getHttpData',function($http){
    return{
        getData: function(){
            return $http.get('/urlA');
        }
    }
});

在你的控制器中:

.controller('testCtrl',['getHttpData',function(getHttpData){
       getHttpData.getData().then(function(data){
              $scope.rec = data;//Whatever you want to store in this variable
       });
  });
相关文章：