从firebase获取数据后的视图上的角度显示模型

时间:2015-11-19 05:14:54

标签: angularjs firebase

我正在使用firebase DB显示我从DB获得的集合。我有那些控制器和服务设置。在html中,我使用search.users期望它将保存我从数据库中获得的所有数据,但它不会显示出来。我无法弄清楚原因。我尝试了一些像angular.copy或$ broadcast这样没有运气的东西。任何人都可以帮忙提出建议吗?提前感谢。

  .controller('SearchController', function ($scope, SearchService, logout, $location){

  var search = this;

  search.users = SearchService.users; 

  //$scope.$on('evtputUsers', function () {
  //  search.users = SearchService.users;
  //});

})

//service for SearchService
.factory('SearchService', function ($http, $rootScope){

  var userRef = new Firebase("app url");

  var broadcastUsers = function () {
    $rootScope.$broadcast('evtputUsers');
  };

  //get the user info
  //insert the data to the db.
  //retrieving the data

  var dbUsers;
  userRef.child('users').on('value', function(snapshot){
    dbUsers = snapshot.val();
    // angular.copy(snapshot.val(), dbUsers); 
    console.log('usersinDB:',dbUsers);
    broadcastUsers();
  }, function(err){
    console.error('an error occured>>>', err);
  });

  return {
    users: dbUsers
  };
})

1 个答案:

答案 0 :(得分:1)

您应该使用AngularFire模块而不是$broadcast()$on()

AngularFire为您提供了一组绑定以同步Angular中的数据。

angular.module('app', ['firebase']) // 1
  .controller('SearchCtrl', SearchCtrl);

function SearchCtrl($scope, $firebaseArray) {
  var userRef = new Firebase("app url")
  $scope.users = $firebaseArray(userRef); // 2
  console.log($scope.users.length); // 3
}

有三件重要的事情需要注意:

  1. 您需要在依赖关系数组中将AngularFire包含为firebase
  2. $firebaseArray()函数会自动将用户参考数据同步到数组中。当数组远程更新时,它将为您触发$digest()循环并保持页面刷新。
  3. 此数组是异步的。在数据填充之前,它不会记录任何内容。因此,如果您的日志记录最初没有显示任何内容,这是因为数据仍在通过网络下载。