Question

我一直绞尽脑汁试图在Firebase Documentation中使用我自己的解决方案实现此代码。

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

      <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>

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

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

  .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>

以上编辑。并且还在POSTS VIEW中添加了这个：

{{1}}

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 Datamodel

2 个答案: