Устранение угловой области иногда пусто

Question

Я работаю с угловым 1.5 и python/mongodb api. api работает нормально (согласованно и быстро), но иногда, когда я загружаю страницу с формой, поля данных пустые.

Приложение использует ui.router для связи состояния chap с правильным URL-адресом и 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... 

Я предполагаю, что вы также можете установить max-age и public на заголовки запросов HTTP, так что сервер не может ответьте на 304. Это не похоже на самую эффективную вещь, поэтому я пошел с использованием кеша на клиенте, чтобы сервер даже не беспокоился.

Это работает для меня, но если проблемы всплывают снова, я буду repost.

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

Внутри обработчик успеха. Я не уверен, это может сработать. пожалуйста, попробуйте