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未返回承诺，因此会立即解析您的承诺列表（而不是在下载所有数据之后）。更改您的列表也返回承诺：

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

在控制器解决后延迟范围更新

1 个答案: