使用 Angularjs 将记录添加到现有的 Firebase 数据模型

Question

我绞尽脑汁想用我自己的解决方案在 Firebase Documentation 中实现这段代码。

我在 Firebase 中有一个 Posts.json 作为数据源，结构示例如下：

{
Title: "Cheese Fondling",

Body: "I love cheese, especially paneer mozzarella. Roquefort cheeseburger cut the cheese fondue edam taleggio cheese slices gouda. Dolcelatte croque monsieur cottage cheese camembert de normandie cheese slices st. agur blue cheese bavarian bergkase swiss. Edam cheesecake parmesan.",
}

我不确定是否需要通过 set() 更新其记录，因为该文件已经存在，但由于它不起作用，我尝试使用 Push，但仍然不起作用。

我的 HTML 表单视图如下所示：

      <form class="form-horizontal" ng-submit="AddPost()">
            <fieldset>

                <!-- Form Name -->
                <legend>{{addp.title}}</legend>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtTitle">Title</label>
                    <div class="col-md-4">
                        <input id="txtTitle" name="txtTitle" type="text" placeholder="placeholder" class="form-control input-md"  ng-model="post.Title">

                    </div>
                </div>

                <!-- Textarea -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="txtPost">Post</label>
                    <div class="col-md-4">
                        <textarea class="form-control" id="txtPost" name="txtPost"  ng-model="post.Body"></textarea>
                    </div>
                </div>

                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="singlebutton"></label>
                    <div class="col-md-4">
                        <input id="singlebutton" ng-disabled="!post.Title || !post.Body" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
                    </div>
                </div>

            </fieldset>
        </form>

controller是通过state单独添加的：

  .state('AddPost', {
      url: '/blog',
      controller: 'AddPostCtrl as addp',
      templateUrl: 'blog.html',
      title: 'Blog'
    })

这是控制器代码：

    controllersModule.controller('AddPostCtrl', ["$scope", '$firebaseArray',
      function($scope, $firebaseArray){
         $scope.AddPost = function() {

   var title = $scope.post.Title;
   var post = $scope.post.Body;
   $scope.refPosts = postsArray;

   var ref = new Firebase('https://<DATASOURCE>.firebaseio.com/');
   var refPosts = ref.child("Posts")
   var postsArray = $firebaseArray(refPosts);

   postsArray.$add({ Title: Title, Body: Body }).then(function(ref) {
        console.log(ref);
        console.log("It worked");
    }, function(error) {
        console.log("Error:", error);
        console.log("It did not work");
    });
}
    }]);

以上编辑。还在帖子视图中添加了这个：

<div class="meeting" ng-repeat="post in refPosts">
    <h5>{{post.Title}}</h5>
    <p>{{post.Body}}</p>

</div>

Answer 1

虽然 AngularFire 和 Firebase 的 JavaScript SDK 可以很好地相互交互，但您不能从一个对象调用另一个对象的方法。您有一个 Firebase JavaScript 引用，您可以在其上调用 ref.push() 或者您有一个 AngularFire $firebaseArray，您可以在其上调用 array.$add().

和Firebase.push()

$scope.AddPost = function() {

   var title = $scope.post.Title;
   var post = $scope.post.Body;

   var ref = new Firebase("https://<DATA SOURCE>.firebaseio.com/");
   var refPosts = ref.child("Posts")

   refPosts.push({ Title: title, Body: body }, function(error) {
       if (error) {
           console.log("Error:", error);
       }
       else {
           console.log("It worked");
       }
   });
}

用$firebaseArray.$add()

 $scope.AddPost = function() {

   var title = $scope.post.Title;
   var post = $scope.post.Body;

   var ref = new Firebase("https://<DATA SOURCE>.firebaseio.com/");
   var refPosts = ref.child("Posts")
   var postsArray = $firebase(refPosts);

   postsArray.$add({ Title: title, Body: body }).then(function(ref) {
        console.log(ref);
        console.log("It worked");
    }, function(error) {
        console.log("Error:", error);
        console.log("It did not work");
    });
}

Answer 2

所以这是最终代码。获得其他人的反馈确实有帮助：

controllersModule.controller('AddPostCtrl', ["$scope", '$firebaseArray',
  function($scope, $firebaseArray){
    var ref = new Firebase('https://<DATASOURCE>.firebaseio.com/Posts');
    var myPosts = $firebaseArray(ref);

    $scope.myPosts = myPosts;

    $scope.AddPost = function() {
        myPosts.$add({
            Title: $scope.post.Title,
            Body: $scope.post.Body
        }).then(function(ref) {
        console.log(ref);
    }, function(error) {
        console.log("Error:", error);
    });
    }
}]);

使用 Angularjs 将记录添加到现有的 Firebase 数据模型

Add records to existing Firebase Datamodel with Angularjs

set

firebase

angularfire