代码之家 › 专栏 › 技术社区 › 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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

7 月前

Alex · 在轻量级中同时解构和不解构变量

7 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

7 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前