Question

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

绑定并不像我希望的那样完全正常。它不向用户显示当前消息，而是显示从先前单击刷新按钮接收的消息。因此，用户在加载视图后第一次单击按钮时，没有任何反应......我无法弄清楚为什么视图更新不是即时更新，而只是在用户再次点击时才会更改。

以下是我的代码的简化版本：

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调用每次都是成功的，但是应该是时间晚了一步。感谢您的帮助！

Answer 1

当然！您必须使用Angular $http服务。

阅读this文章。

Answer 2

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注入您的控制器。

Answer 3

为了进行http调用，理想情况下，您需要为此类场景创建工厂。实现http的工厂将默认返回一个promise，您可以在其上更新范围变量。

工厂语法为：

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

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

3 个答案: