Angularjs 范围延迟'；在控制器'；s决心

在显示新控制器的视图之前，我正在使用firebase下载一些数据，但是在显示数据之前，模板会“闪烁”。我不知道为什么，它应该立即显示数据，没有任何延迟。我已经录制并标记了每一帧（）。控制台记录解析对象返回的数据。您可以看到，在记录数据时，在第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>

应用程序：

“严格使用”；
角度模块（'App'[
“ngCookies”，
“ngResource”，
“消毒”，
"ngRoute",，
“火力基地”，
“angularfire.firebase”，
'angularfire.login'
])
.config（函数（$routeProvider）{
$routeProvider
。当（“/”{
templateUrl:'views/log-in.html'，
控制器：“LogInCtrl”
})
。当（“/选择字符”{
templateUrl:'views/select character.html'，
控制器：“SelectCharacterCtrl”，
决心：{
字符：函数（$q、$timeout、$firebase、$firebaseSimpleLogin）{
var deferred=$q.deferred（）；
var loginObj=$firebaseSimpleLogin（新Firebase（“https://.firebaseio.com"));
loginObj.$getCurrentUser（）
.then（函数（用户）{//获取登录数据
var userSync=$firebase（新firebase（'https://.firebaseio.com/users/“+user.uid”）；
返回userSync.$asObject（）.$loaded（）；
})
.then（函数（用户）{//获取所有字符
var承诺=[]；
angular.forEach（user.characters，函数（名称）{
var promise=$firebase（新firebase（'https://.firebaseio.com/characters/"姓名),；
promises.push（promise.asObject（））；
});
$q.全部（承诺）。然后（功能）{
（某事物）日志；
决定（某事）；
});
});
回报。承诺；
}
}
})
.when（“/create character”{
templateUrl:'views/create character.html'，
控制器：“CreateCharacterCtrl”
})
});

---

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

由于

$asObject

不返回承诺，您的承诺列表将立即得到解决（而不是在下载所有数据之后）。更改您的列表以回报承诺：

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

angular.forEach（user.characters，函数（名称）{
var promise=$firebase（新firebase（'https://.firebaseio.com/characters/"姓名),；
promise.push（promise.asObject（）.$loaded（））；
});

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

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