控制器解析后作用域更新延迟

Question

在显示新控制器视图之前，我正在使用firebase下载一些数据，但在显示数据之前，模板会"闪烁"。我不知道为什么，它应该立即显示数据，没有任何延迟。我已经录制好了，并标记了每一帧(http://i.imgur.com/pUsMCqX.gif)。控制台记录解析对象返回的数据。您可以看到，当记录数据时，模板在第2帧和第3帧显示为没有数据。

模板：

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

控制器：

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

应用程序：

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

为什么在更新范围之前，模板在没有数据的情况下"闪烁"2帧？有什么想法吗？

Answer 1

由于$asObject不返回promise，因此您的promise列表将立即得到解析（而不是在下载所有数据之后）。更改您的列表以返回承诺：

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