如何导航从 AngularFire 返回的对象?
How to navigate object returned from 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'])
returns 未定义。怎么了?
A $firebaseObject
开始时是一个空对象,但是当数据从 Firebase 数据库下载后,它就会填充该对象。
起初,您什么都看不到,因为数据尚未下载。您的 console.log()
在 $firebaseObject
创建后运行一纳秒。数据在几毫秒后下载。
所以你可能会问,如果数据一开始不存在,我该如何处理?
您可以将 $firebaseObject
附加到 $scope
。然后将其绑定到您的模板中。当数据下载时 Angular $digest
循环运行,并刷新您的模板。
你的控制器看起来像这样:
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
}
当我 运行 以下 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'])
returns 未定义。怎么了?
A $firebaseObject
开始时是一个空对象,但是当数据从 Firebase 数据库下载后,它就会填充该对象。
起初,您什么都看不到,因为数据尚未下载。您的 console.log()
在 $firebaseObject
创建后运行一纳秒。数据在几毫秒后下载。
所以你可能会问,如果数据一开始不存在,我该如何处理?
您可以将 $firebaseObject
附加到 $scope
。然后将其绑定到您的模板中。当数据下载时 Angular $digest
循环运行,并刷新您的模板。
你的控制器看起来像这样:
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
}