angular scope initialization sometimes empty

Question

I'm working with angular 1.5 and a python/mongodb api. The api is working fine (consistent and fast), but sometimes when I load a page with a form the data fields are empty.

The app uses ui.router to associate the chap state with the correct url and the chapController. I type that url into the address bar and hit return to load the page. In the controller, the path/to/api returns json data.

Here's a simplified version of the controller:

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

The view looks like this:

<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>

Usually the form comes up populated with data but sometimes the fields are blank (using the same url). I can reload the page from the browser and then it will populate, but of course that's not a good user experience.

What am I doing wrong?

I'm looking at the doc here and I don't see how to use it in my context: docs.angularjs.org/api/ng/directive/ngInit My data is a large json object. — Tim
– Tim, Commented Nov 30, 2016 at 18:58

Tim · Accepted Answer · 2016-12-02 18:53:24Z

1

After research plus trial-and-error, I think I've got the answer. The reason the scope wasn't binding to the data is that there was no data: my server was sending a 304 "not modified" response.

So of course it couldn't bind with non-existent data but the http response was still counted as success. Seems like this would be a common 'gotcha'.

What worked for me is to add a config object to each http.get call, like this

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

My guess is that you could also set max-age and public on the http request headers so the server cannot respond with a 304. That didn't seem like the most efficient thing to do, so I went with using cache on the client so the server isn't even bothered.

This is working for me, but if problems pop up again, I'll repost.

answered Dec 2, 2016 at 18:53

Tim

1,0233 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

willie17 · Accepted Answer · 2016-11-30 20:55:49Z

0

Since you're using ui.router, I recommend using resolve for this.

Example:

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

and in your controller:

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

answered Nov 30, 2016 at 20:55

willie17

9018 silver badges12 bronze badges

2 Comments

Tim Over a year ago

I cannot get it to fail today, I'll return when I can reproduce. I'm reading about resolve now and it seems like it's for cases of nested states, but I don't have any of those.

jusopi Over a year ago

resolve is useful for any state in which you want to ensure data is present before moving to that particular state. It's very relevant in cases where you might have a load overlay on your views, and want to block the entire view ou until data has been resolved.

Ajaykumar · Accepted Answer · 2016-11-30 21:06:38Z

0

Sometimes data won't bind with the scope. can you check by including this line

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

Inside success handler. I am not sure, it may work. please try

answered Nov 30, 2016 at 21:06

Ajaykumar

4165 silver badges16 bronze badges

1 Comment

Tim Over a year ago

thanks, but the doc says that http calls finish with $scope.apply: jimhoskins.com/2012/12/17/angularjs-and-apply.html so I can't see how calling apply again would help.Still, as soon as I can reproduce the problem I'll see if it does help.

Collectives™ on Stack Overflow

angular scope initialization sometimes empty

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related