代码之家 › 专栏 › 技术社区 › user7747472

如何用angularjs作用域绑定firebase数据

firebase-realtime-database firebase angularjs javascript

user7747472 · 技术社区 · 7 年前

嗨,我如何将从firebase接收到的数据绑定到angularjs中的scope。我对这件事还不熟悉 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 是的。

有人能告诉我哪里做错了吗?

2 回复 | 直到 7 年前

Frank van Puffelen 7 年前

当你的火力基地 on("value" 回调被调用,angularjs不再需要对html进行更改。因此,您必须明确地告诉它您正在通过使用 $apply() 或 $timeout() 以下内容:

app.controller("UserController",  function ($scope, $routeParams, $location) {
    firebaseRef.child('users').on("value", function(response) {
      $timeout(function() {
        $scope.userCount=response.numChildren();
      });
  });
}

还可以看到:

Marcus Höglund 7 年前

您需要将ng视图添加到视图中。

像这样试试

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>

推荐文章

TOM · 检查Firebase数据库子项是否已存在,如果不存在,添加它的最佳方法是什么?

7 月前

Guy Sadoun · 如果正在监听的引用被删除,ValueEventListener是否会继续监听?

11 月前

moco · 通过CLI向Firebase实时数据库发送有效JSON文件时出现错误400

1 年前

MN Dijital · 为什么只显示新添加的数据而不显示所有数据?

1 年前

Computable · 未验证请求的Firebase应用程序检查(RTDB)失败模式

1 年前

Harsh Master · 为android应用程序实现自动通知

1 年前

Jakub Olszewski · com.google.firebase.database.DatabaseException:无法将java.lang.Boolean类型的值转换为String这是怎么回事?

1 年前

mkty · 如何使用react中的map打印JSON数据

1 年前

Rohan Raj · 如何在函数中更改firebase实时数据库的子级值,我试过了,但不起作用。请使用kotlin

1 年前

Michel · 使用Firebase CLI选择文档

1 年前