Question

我正在尝试使用angularjs访问firebase中的注释列表，但是在显示数据时遇到问题。控制台中没有抛出任何错误。

＆＃13;

Notes.controller('ListGroupCtrl', ['$scope',
  function($scope) {
    NotesRef.on("child_added", function(snapshot) {
      var newNotes = snapshot.val();
      console.log("title: " + newNotes.Title);
    });
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="list-group" id="list-group" ng-controller="ListGroupCtrl">
  <!-- List of Notes -->
  <div class="list-group-item" value="" ng-repeat="note in newNotes">
    <div class="list-note-title" ng-repeat="(key, val) in note">{{key}}: {{val}}</div>
  </div>
</div>

＆＃13;

HTML显示为：

<div class="list-group ng-scope" id="list-group" ng-controller="ListGroupCtrl">
  <!-- List of Notes -->
  <!-- ngRepeat: note in newNotes -->
</div>

console.log行显示：

title: Title 1
title: Title 2
title: Title 3

Firebase数据：

Notes:

-1:
   -title: Title 1
   -content: Content 1
-2:
   -title: Title 2
   -content: Content 2
-3:
   -title: Title 3
   -content: Content 3

我现在已经手动输入了数据。但是，我将使用Firebase的.set（），它将随机生成1,2,3。所以数据会变成......：

Notes:

-QWE39Poif8uDh:
   -title: Title 1
   -content: Content 1
-78DBn2ja8skHf:
   -title: Title 2
   -content: Content 2
-11oLkdwjHf8a9:
   -title: Title 3
   -content: Content 3

Answer 1

使用$scope访问视图中的变量。

Notes.controller('ListGroupCtrl', ['$scope', function ($scope) { NotesRef.on("child_added", function(snapshot) { $scope.newNotes = snapshot.val(); //use $scope. console.log("title: " + $scope.newNotes.Title); }); }])

Answer 2

正如Frank指出的那样，主要问题是当新数据可用时，您没有更新范围。您可以通过将angularjs $timeout注入控制器来实现此目的。请参阅下文，使用Firebase Litecoin汇率API的示例。

HTML模板

<body ng-controller="RatesCtrl">
  Updated:
  <pre>{{ rate._updated }}</pre>
  Data:
  <pre><span ng-repeat="(key, val) in rate">{{ key }} : {{ val }}<br></span></pre>
  Raw:
  <span><pre>{{ rate | json }}</pre></span>
</body>

的JavaScript

var app = angular.module('plunker', []);

app.controller('RatesCtrl', function ($scope, $timeout) {
  var ratesRef = new Firebase('https://publicdata-cryptocurrency.firebaseio.com/litecoin');
  ratesRef.on('value', function (snapshot) {
    $timeout(function () {
      update(snapshot);
    });
  });

  function update (snapshot) {
    console.log('update fired');
    $scope.rate = snapshot.val();
  }
});

完美地显示和更新信息。

enter image description here

此处相关的plunker http://plnkr.co/edit/SUenBO

<小时/> 除此之外，我建议使用angular-fire，这会让您的生活更轻松。

HTML模板

<body ng-controller="RatesCtrl">
  <div>
    Rate:
    <pre>Exchange rate is {{ rate.last }} at {{ rate._updated }}</pre>
    Raw:
    <pre>{{ rate | json }}</pre>
  </div>
</body>

的JavaScript

var app = angular.module('plunker', ['firebase']);

app.controller('RatesCtrl', function ($scope, RatesService) {
  $scope.rate = RatesService.update();
});

app.factory('RatesService', function ($firebase) {
  var ref = new Firebase('https://publicdata-cryptocurrency.firebaseio.com/litecoin');

  return {
    update: function () { 
      console.log('update fired');
      return $firebase(ref).$asObject();
    }
  };
});

这给你类似

的东西

enter image description here 相关的plunker可以http://plnkr.co/edit/QvBHRX

Answer 3

您已经看到数据通过您拥有的代码进入您的客户端。但是Angular并没有意识到这一点，这意味着它不会更新视图。正如Mikko在他的回答中所说，这通常由AngularFire为您处理。此外，当您将push调用为Angular ng-repeat更喜欢的常规数组索引时，AngularFire还会处理Firebase生成的键的映射。

所以我建议使用AngularFire。但在此之前，这应该足以让你更进一步：

Notes.controller('ListGroupCtrl', ['$scope', '$timeout',
  function($scope, $timeout) {
    NotesRef.on("child_added", function(snapshot) {
      var newNotes = snapshot.val();
      $timeout(function() {
        $scope.newNotes = snapshot.val();
      });
    });
  }
]);

在$timeout中运行代码可确保Angular随后更新任何受影响的视图。

现在Firebase文档中有关于此类Angular-without-AngularFire interaction的合适版块。

使用ng-repeat从firebase访问对象数组

3 个答案: