Question

嗨，我该如何绑定我从firebase接收到的数据和angularJS中的作用域。我是w3school的新手。所以我不确定我缺少什么。我正在使用


cd /usr/lib/google-cloud-sdk/platform/google_appengine/lib/cacerts/
cat my_cert >> urlfetch_cacerts.txt

我的代码是这样的

timestamp               date        price    endofdaytime
2018-03-11 13:03:00     2018-03-11  20.03   2018-03-11 16:29:52
2018-03-11 13:08:00     2018-03-11  19.00   2018-03-11 16:29:52
2018-03-11 15:22:00     2018-03-11  20.11   2018-03-11 16:29:52
2018-03-11 16:03:00     2018-03-11  21.03   2018-03-11 16:29:52
2018-03-11 16:29:52     2018-03-11  20.03   2018-03-11 16:29:52
2018-03-12 13:03:00     2018-03-12  20.03   2018-03-12 16:29:59
2018-03-12 13:08:00     2018-03-12  19.00   2018-03-12 16:29:59
2018-03-12 16:03:00     2018-03-12  21.03   2018-03-12 16:29:59
2018-03-12 16:29:59     2018-03-12  22.00   2018-03-12 16:29:59

在html中，我正在这样做

"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 lang="en" ng-app="my-first-app"> ............<HEADER AND TITLE AND BODY>...... <h3>User count : {{userCount}} </h3> </body> </html>我看到了console.log，也没有任何反应。

谁能告诉我我做错了什么地方？

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 个答案: