如何导航从AngularFire返回的对象?

时间:2016-01-21 19:31:12

标签: javascript angularjs firebase angularfire

当我运行以下Firebase查询时:

    var ref = new Firebase('https://<myfirebase>.firebaseio.com/companies/endo/status');
    data = $firebaseObject(ref);
    console.dir(data);

我得到以下对象:

d
$$conf: Object
$id: "status"
$priority: null
Active, not recruiting: 39
Approved for marketing: 1
Completed: 339
Enrolling by invitation: 10
Not yet recruiting: 23
Recruiting: 128
Suspended: 3
Terminated: 38
Unknown: 74
Withdrawn: 15
__proto__: Object

我正在尝试使用值339访问“Completed”元素。但是,console.log(data['Completed'])返回undefined。有什么问题?

1 个答案:

答案 0 :(得分:1)

$firebaseObject最初是一个空对象,但是当从Firebase数据库下载数据时,它会填充该对象。

首先,您没有看到任何内容,因为数据尚未下载。 console.log()创建$firebaseObject后,$firebaseObject运行一个纳秒。数据是在几毫秒之后下载的。

所以你可能会问,如果数据一开始就不存在,我该如何处理?

您可以做的是将$scope附加到$digest。然后将其绑定在您的模板中。当数据下载时,Angular app.controller('MyCtrl', function($scope, $firebaseObject) { var ref = new Firebase('https://<myfirebase>.firebaseio.com/companies/endo/status'); $scope.data = $firebaseObject(ref); }); 循环运行,并刷新您的模板。

你的控制器看起来像这样:

<div>Did you do it? {{ data.Completed }}</div>

您的模板如下所示:

angular.module('app', ['firebase'])
  .constant('FirebaseUrl', '<my-firebase-app>')
  .service('rootRef', ['FirebaseUrl', Firebase])
  .controller('MyCtrl', MyController)
  .config(ApplicationConfig);

function ApplicationConfig($routeProvider) {
   $routeProvider.when('/', {
      controller: 'MyCtrl',
      template: 'view.html',
      resolve: { 
        data: function ($firebaseObject, rootRef) {
          var ref = rootRef.child('companies/endo/status');
           // a promise for the downloaded data
          return $firebaseObject(ref).$loaded();
        }
      }
   });
}

function MyController($scope, data) {
  $scope.data = data;
  console.log(data.Completed); // will work because the data is downloaded
}

还有另一种方法,需要更多设置,但这是我个人的最爱。您还可以使用路由器将数据解析到控制器中。

PayloadValidatingInterceptor