Question

我正在使用angular 1.5和python / mongodb api。 api工作正常（一致且快速），但有时当我加载带有表单的页面时，数据字段为空。

该应用使用ui.router将chap状态与正确的网址和chapController相关联。我在地址栏中键入该URL并点击return以加载页面。在控制器中，path/to/api返回json数据。

这是控制器的简化版本：

angular.module('configurer')
.controller('chapController', function($scope, $http, $state) {
    var url='path/to/api';
    $http.get(url).success(function(data){
        $scope.data = data;
    });

    $scope.save = function()( {
        $http.post(url, $scope.data).success(function() {
            $state.go('home', {reload:true});
        });
    });

视图如下所示：

<button class="btn btn-primary" ng-click="save()">Save Changes</button>
<form>
  <div class="row">
    <div class="col-sm-3 form-group">
      <label for="name">Name</label>
      <input class="form-control" id="name" type="text" name="name" ng-model="data.chap.name" />
    </div>
    <div class="col-sm-9 form-group">
      <label for="title">Title</label>
      <input class="form-control" id="title" type="text" title="title" ng-model="data.chap.title" />
    </div>
  </div>
</form>

通常表单会填充数据，但有时字段为空（使用相同的URL）。我可以从浏览器重新加载页面然后填充，但当然这不是一个好的用户体验。

我做错了什么？

Answer 1

经过研究和反复试验，我想我已经得到了答案。范围没有绑定到数据的原因是没有数据：我的服务器发送了304“未修改”的响应。

当然，无法与不存在的数据绑定，但http响应仍被视为成功。这似乎是一个常见的'陷阱'。

对我来说有用的是为每个http.get调用添加一个配置对象，比如

http.get(url, {cache:true}).success(function(data) { etc...

我猜你也可以在http请求标头上设置max-age和public，这样服务器就无法用304响应。这似乎不是最有效的事情，所以我在客户端上使用缓存，因此服务器甚至没有受到打扰。

这对我有用，但如果再次出现问题，我会重新发布。

Answer 2

由于您使用的是ui.router，因此我建议您使用resolve。

示例：

$stateProvider
  .state('chap', {
    // ...
    resolve: {
      data: function($http){
        return $http.get(...);
      }
    }
  });

并在您的控制器中：

angular
  .module('configurer')
  .controller('chapController', function(data, $scope, $http, $state) {
    $scope.data = data;
  }

Answer 3

有时数据不会与范围绑定。你可以通过包括这一行来检查

$scope.data = data;
$scope.$apply();

内部成功处理程序。我不确定，它可能会奏效。请尝试

角度范围初始化有时为空

3 个答案: