如何使用angularJS范围绑定firebase的数据

问题描述 投票:1回答:2

我怎么能绑定我从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也没有任何事情发生。

谁能告诉我我哪里做错了?

javascript angularjs firebase firebase-realtime-database
2个回答
2
投票

在调用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();
      });
  });
}

另见:


0
投票

您需要将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>
© www.soinside.com 2019 - 2024. All rights reserved.