如何 $scope 在 Angular 应用程序上使用 firebase 对象答案

【问题标题】：How to $scope use a firebase object on an Angular App如何 $scope 在 Angular 应用程序上使用 firebase 对象
【发布时间】：2017-06-08 17:04:02
【问题描述】：

我是编码新手，非常感谢您提供基本答案。

我正在尝试将 firebase 对象用作 javascript 数组，以便使用 $scope 在 html 上使用它。最好的方法是什么？

数据库： database

我正在使用：

var mainApp = angular.module("bookWorm", []);

mainApp.controller('bookController', function($scope, $http) {

  var ref = firebase.database().ref("Fiction");

  ref.once("value", function(snapshot) {

    console.log(snapshot.val());
    $scope.fiction = snapshot.val();

  });


});

<div class="contents">
  <div class="heading">
    <h2 style="text-align:center">Fiction</h2>
  </div>
  <u1 style="cursor:pointer">
    <li ng-repeat="content in fiction"><img src="assets/fiction/{{content.book}}.png" width="200px" height="200px"></li>
  </u1>
</div>

我在控制台中得到以下信息：

Object {-Km712C_iBij3OkXCR1s: Object, -Km71G_rHgirXWZi1xh6: Object, -Km71Rje4ZeluNYtK8x_: Object, -Km71gTdrfgC1BeXIPPU: Object, -Km71x6C-s_FFTcEMYCc: Object…}

-Km71G_rHgirXWZi1xh6 ：目的作者：《阿什温·桑吉》书： “chanakya的圣歌” 成本： “300” 原型：目的 -Km71Rje4ZeluNYtK8x_ ：目的 -Km71gTdrfgC1BeXIPPU ：目的 -Km71x6C-s_FFTcEMYCc ：目的 -Km72Bg8o63vuNBqnU4D ：目的 -Km72VI64weNgpMJTXCL ：目的 -Km72d4OIl3pz5BylWc4 ：目的 -Km72kkzjTksropLmXzY ：目的 -Km72tZ4u2CIPpK8FU_n ：目的 -Km73NBgknkSUHytQmY5 ：目的 -Km74QCIFrgrOhzp7IIP ：目的 -Km712C_iBij3OkXCR1s ：目的 -Km739xvEa1StJHvWcka ：目的原型：对象

但我无法列出“书”元素。请提供一些示例。

【问题讨论】：

html中的bookController在哪里？
此外；用于角度的动态 src；使用 ng-src docs.angularjs.org/api/ng/directive/ngSrc
感谢@AgamBanga。

标签： javascript angularjs firebase

【解决方案1】：

您可能应该只使用 angular firebase 模块，以便在发生更改以更新视图时处理触发 rootScope 上的应用/摘要：

https://github.com/firebase/angularfire

您也可以将 $scope.$apply 添加到您的代码中，但不了解这一点是不明智的。

【讨论】：

【解决方案2】：

当我使用 firebase 的许多离子应用程序时，如何在 ng-repeat 中尝试（键、值）对。这是显示数据的最有效方式。这是您问题的示例

var mainApp = angular.module("bookWorm", []);

mainApp.controller('bookController', function($scope, $http) {

  var ref = firebase.database().ref("Fiction");

  ref.once("value", function(snapshot) {

    console.log(snapshot.val());
    $scope.fiction = snapshot.val();

  });


});

<div class="contents">
  <div class="heading">
    <h2 style="text-align:center">Fiction</h2>
  </div>
  <ul style="cursor:pointer">
    <li ng-repeat="(key, value) in fiction"><img src="assets/fiction/{{value.book}}.png" width="200px" height="200px"></li>
  </ul>
</div>

【讨论】：