如何使用angularJS作用域綁定Firebase數據

Question

嗨，我該如何綁定我從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 。

誰能告訴我我做錯了什么嗎？

Answer 1

到您的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();
      });
  });
}

另請參閱：

Answer 2

您需要將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數據

問題描述

2 個解決方案

解決方案1
2 已采納 2018-07-05 19:30:02

解決方案2
0 2018-07-05 19:22:04

如何使用angularJS作用域綁定Firebase數據

問題描述

2 個解決方案

解決方案1 2 已采納 2018-07-05 19:30:02

解決方案2 0 2018-07-05 19:22:04

解決方案1
2 已采納 2018-07-05 19:30:02

解決方案2
0 2018-07-05 19:22:04