CODEWITHSUNDEEP
angularjsfirebaseangularfire
biphobe
biphobe

Reputation: 4818

Delay of scope's update after controller's resolve

I'm downloading some data using firebase before presenting new controller's view, but the template "blinks" before showing the data. I have no idea why, it should show the data instantly without any delay. I've recorded it and marked each individual frame (http://i.imgur.com/pUsMCqX.gif). Console logs the data that resolve object returns. You can see that when data is being logged, the template is being shown with no data at frames 2 and 3.

Template:

<div ng-cloak class="wrapper select-character">

  <div>
    <div>
      <h1>Select character</h1>
      <div>
        <button ng-click="createNewCharacter()">create new character</button>
      </div>
      characters' list
    </div>
  </div>

  <div ng-repeat="character in characters">
    <div>
      Name: {{ character.name }}
      <br>
      Level: {{ character.level }}
      <br>
      <button ng-click="enterWorld(character.name)">Choose</button>
    </div>
  </div>

</div>

Controller:

'use strict';

angular.module('App')
  .controller('SelectCharacterCtrl', function($scope, $firebaseSimpleLogin, $location, characters) {

    $scope.createNewCharacter = function() {
      $location.path("/create-character");
    };

    $scope.enterWorld = function(name) {
      alert(name);
    };

    $scope.characters = characters;

  });

App:

'use strict';

angular.module('App', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'firebase',
  'angularfire.firebase',
  'angularfire.login'
])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/log-in.html',
        controller: 'LogInCtrl'
      })
      .when('/select-character', {
        templateUrl: 'views/select-character.html',
        controller: 'SelectCharacterCtrl',
        resolve: {
          characters: function($q, $timeout, $firebase, $firebaseSimpleLogin) {
            var deferred = $q.defer();
            var loginObj = $firebaseSimpleLogin(new Firebase("https://<id>.firebaseio.com"));

            loginObj.$getCurrentUser()
              .then(function(user) { // get login data
                var userSync = $firebase(new Firebase('https://<id>.firebaseio.com/users/' + user.uid));

                return userSync.$asObject().$loaded();
              })
              .then(function(user) { // get all characters
                var promises = [];

                angular.forEach(user.characters, function(name) {
                  var promise = $firebase(new Firebase('https://<id>.firebaseio.com/characters/' + name));

                  promises.push(promise.$asObject());
                });

                $q.all(promises).then(function(sth) {
                  console.log(sth);
                  deferred.resolve(sth);
                });
              });

            return deferred.promise;
          }
        }
      })
      .when('/create-character', {
        templateUrl: 'views/create-character.html',
        controller: 'CreateCharacterCtrl'
      })
  });

Why does the template "blinks" with no data for 2 frames before updating the scope? Any ideas?

Upvotes: 1

Views: 448

Answers (1)

Kato
Kato

Reputation: 40582

Since $asObject does not return a promise, your list of promises are immediately resolved (instead of after all the data is downloaded). Change your list to return promises too:

angular.forEach(user.characters, function(name) {
  var promise = $firebase(new Firebase('https://<id>.firebaseio.com/characters/' + name));
  promises.push(promise.$asObject().$loaded());
});

Upvotes: 2

Related Questions