在 angularFire / Firebase 中创建和添加数组

Question

我正在尝试使用 angularjs 和 Firebase 构建一个类似于论坛的应用程序来帮助我的同学解决问题。我也希望人们能够 'reply' 解决同学们遇到的具体问题，所以我在 angularjs 工厂中创建了一个具有许多值的对象，如下所示：

factory.addError = function() {
 factory.errors.$add({
  ...
  replies: []
 });
};

问题是 Firebase 不保存占位符为空值的参数，例如上面的参数 'replies'。我曾尝试将占位符值硬编码到数组中，但这似乎是一个非常不完整的解决方案，而且它本身也带来了一系列问题，让我不得不删除 Firebase 中的数据。作为参考，这里是链接控制器中的代码：

$scope.error.replies.$push({
  name: $scope.replyName,
  message: $scope.replyMessage,
  time: (new Date()).toString(),
  upvote: 0
});

如何将空数组初始化为对象？ $push 会正确使用 Firebase 的命令将其保存到它自己的数据集中吗？

Answer 1

首先，这里有一些相关的资源和建议：

资源

• 查看 Firebase 的博客 post、Best Practices: Arrays in Firebase - "Arrays are evil".
• 此外，AngularFire Development Guide。
• 以及 AngularJS providers 的文档。

建议

正如 AngularFire API Documentation 所说：

"There are several powerful techniques for transforming the data downloaded and saved by $firebaseArray and $firebaseObject. These techniques should only be attempted by advanced Angular users who know their way around the code."

将所有这些放在一起，您可以通过以下方式完成您想做的事情：

• 扩展 AngularFire 服务，$firebaseArray and $firebaseObject。
• 遵循 extending services.
的文档

例子

扩展错误$firebaseObject

.factory('Error', function(fbUrl, ErrorFactory) {
  return function(errorKey){
    var errorRef;
    if(errorKey){
      // Get/set Error by key
      errorRef = new Firebase(fbUrl + '/errors/'+errorKey);
    } else {
      // Create a new Error
      var errorsListRef = new Firebase(fbUrl + '/errors');
      errorRef = errorsListRef.push();
    }
    return new ErrorFactory(errorRef);
  }
})

.factory('ErrorFactory', function($firebaseObject){
  return $firebaseObject.$extend({
    sendReply: function(replyObject) {
      if(replyObject.message.isNotEmpty()) {
        this.$ref().child('replies').push(replyObject);
      } else {
        alert("You need to enter a message.");
      }
    }
  });
})

错误控制器

.controller('ErrorController',function($scope, Error) {
  // Set empty reply message
  $scope.replyMessage = '';

  // Create a new Error $firebaseObject
  var error = new Error();
  $scope.error = error;

  // Send reply to error
  $scope.reply = function(){
      error.sendReply({message:$scope.replyMessage});
  }
})

和String.prototype.isNotEmpty()

String.prototype.isNotEmpty = function() {
    return (this.length !== 0 && this.trim());
};

（改编自this answer）

---

希望对您有所帮助！