Angular Fire：未定义不是函数（$on 方法不存在）答案

【问题标题】：Angular Fire: undefined is not a function ($on method does not exist)Angular Fire：未定义不是函数（$on 方法不存在）
【发布时间】：2014-12-09 16:29:15
【问题描述】：

我正在尝试将我的 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);
      });
    },
    ...

main.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) {

【问题讨论】：

我不确定这是您在.service 中返回函数的方式。
@Blazemonger 好吧，它在ProviderService 中定义，我已将其注入我的MainCtrl...
乍一看，fireProvider.$on 好像不是一个函数。你能确认一下吗？
@Mutahhir 我该如何确认？我一直在按照教程执行此操作，他们已将 providerRef.on（有效）更改为 fireProvider.$on（引发错误）。
只需在 childAdded 函数上添加断点，然后使用浏览器开发工具控制台并输入fireProvider.$on 和fireProvider.on。结果会让你知道。

标签： javascript angularjs firebase angularfire

【解决方案1】：

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

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

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

以前我们必须使用.$on() 来收听被添加到集合中的孩子。现在使用.$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;
});

【讨论】：

那么你会推荐升级我的AngularFire版本并使用.$asArray()方法重构代码吗？我正在尝试从您的教程中使 Prev 和 Next 按钮正常工作。我在我的fireProvidervariable 上使用.$asArray()。我会完全删除$on 吗？
我不明白。那我怎么听child_added呢？要使用watch？我刚刚参加 firebase 聚会，有人告诉我不要使用 watch，因为它非常密集并且会监视所有元素。由于$on 已被弃用，我如何只收听child_added 对我的firebaseArray 的更改？
$firebaseArray 是一个数组，其中附加了所有适当的（child_added、child_changed、child_removed、child_removed）侦听器。您只需将其绑定到范围并收工。 AngularFire 会处理剩下的事情。
如果我的回答对您有用，请告诉我。如果是，请将其标记为已接受。保持未回答的队列清晰是件好事。

【解决方案2】：

你是要获取 promise 数据吗？我对 firebase 了解不多，让我们试试这个。你有 $q 但没有被使用。如果这个抛出错误，它与服务提供者有关。

function providerReference(){
var deferred = $q.defer(),
providerRef = new Firebase(FBURL).child('providers');
providerRef.then(function(d) {
    var fireProvider = $firebase(d).$asArray();
    deferred.resolve(fireProvider);
}, function(err) {
    console.log('error')
});
return deferred.promise

}

return {
 childAdded: function() {
     return providerReference();
 }

}

在 main.js 中

$scope.providers = [];
ProviderService.childAdded().then(function(addedChild) {
    $scope.providers.push(addedChild);
})

【讨论】：