如何使用angularJS范围绑定firebase的数据
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用angularJS范围绑定firebase的数据相关的知识，希望对你有一定的参考价值。
我怎么能绑定我从firebase收到的数据与angularJS中的范围。我是新手，并关注w3school。所以我不确定我错过了什么。我在用
"angular": "^1.7.2",
"angular-route": "^1.7.2",
"firebase": "^5.2.0",
我的代码是这样的
app.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl:'home.html',
controller:'UserController'
})
})
app.controller("UserController", function ($scope, $routeParams, $location) {
firebaseRef.child('users').on("value", function(response) {
$scope.userCount=response.numChildren();
});
})
在html中，我这样做
<html lang="en" ng-app="my-first-app">
............<HEADER AND TITLE AND BODY>......
<h3>User count : {{userCount}} </h3>
</body>
</html>
但即使我console.log response.numChildren()的价值，我看到4也没有任何事情发生。
谁能告诉我我哪里做错了？
答案
在调用Firebase on("value"回调时，AngualarJS不再期望对HTML进行更改。因此，您必须使用$apply()或$timeout()明确告诉它您正在更改HTML：
app.controller("UserController", function ($scope, $routeParams, $location) {
firebaseRef.child('users').on("value", function(response) {
$timeout(function() {
$scope.userCount=response.numChildren();
});
});
}
另见：
- Firebase data normalized. How should I fetch a collection based on this structure?
- Firebase callbacks and AngularJS
- AngularJS & Firebase '$timeout is not defined'
另一答案
您需要将ng-view添加到视图中。
试试吧
var app = angular.module("my-first-app",["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/',{
template:'<h3>User count : {{userCount}} </h3>',
controller:'UserController'
})
})
app.controller("UserController", function ($scope, $routeParams, $location) {
$scope.userCount = 3;
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.min.js"></script>
<div ng-app="my-first-app">
<div ng-view></div>
</div>以上是关于如何使用angularJS范围绑定firebase的数据的主要内容，如果未能解决你的问题，请参考以下文章