javascript - Angular 火 : undefined is not a function ($on method does not exist)

Question

我正在尝试将我的 Firebase 数据记录到控制台。但我不断收到错误消息:undefined is not a function。完整错误如下:

TypeError: undefined is not a function
at Object.childAdded (http://localhost:9000/scripts/services/ProviderService.js:11:22)
at new <anonymous> (http://localhost:9000/scripts/controllers/main.js:118:19)

这是我的代码目前的样子:

ProviderService.js

angular.module('outcomesApp').service('ProviderService', function(FBURL, $q, $firebase) {
  var providerRef = new Firebase(FBURL).child('providers');
  var fireProvider = $firebase(providerRef).$asArray();

  return {
    childAdded: function childAdded(cb) {
      fireProvider.$on('child_added', function(data) {
        console.log(data);
      });
    },
    ...

ma​​in.js

app.controller('MainCtrl', function ($scope, $filter, $timeout, $firebase, FBURL, ProviderService) {
  ProviderService.childAdded(function(addedChild) {
    $scope.providers.push(addedChild);
  });
  ...

错误发生在这一行:fireProvider.$on('child_added', function(data) {

Answer 1

您使用的是过时版本的 AngularFire。那个版本看起来像 0.7，从 0.8 开始，发生了很多变化。 .$on 方法不再存在，这就是您收到未定义错误的原因。现在，借助新版本的 Firebase，您可以使用新 API 将代码重构为仅几行代码。

当需要管理集合时，使用新的 .$asArray() 方法。

随着 0.8 更新，.$on() 已被删除并替换为使用 .$asArray() 或 .$asObject。

以前我们必须使用 .$on() 来监听添加到集合中的 child 。现在使用 .$asArray() 我们可以自动更新集合。

angular.module('example').controller('MainCtrl', function($scope, $firebase) {
  var ref = new Firebase('<your-firebase>');

  // using $asArray we automatically have child_added handled for us
  $scope.items = $firebase(ref).$asArray();
});

您也可以轻松地将这些数据放入工厂。

angular.module('example').factory('Items', function($firebase) {
  var ref = new Firebase('<your-firebase>');
  return $firebase(ref).$asArray();
});

angular.module('example').controller('MainCtrl', function($scope, Items) {
  $scope.items = Items;
});