无法从Firebase发送和接收数据

Question

I am trying to build a blog with angularjs+firebase Now I am finding it difficult sending and getting posts from firebase here is what I tried

(function() {
  angular
    .module("blog", ['firebase'])
    // .controller("SampleCtrl", function($scope, $firebaseArray) {
    //      var ref = new Firebase("https://eventables.firebaseio.com/blog");
    //      var syncBlog = $firebaseObject(ref);
    //      syncBlog.$bindTo($scope, "data");

  // })
  .controller("BlogCtrl", function($scope, $firebaseArray) {
    console.log("i rock oOO");
    var ref = new Firebase("https://eventables.firebaseio.com/blog");
    // create a synchronized array
    $scope.blogPosts = $firebaseArray(ref);
    // add new items to the array
    // the message is automatically added to our Firebase database!
    $scope.addPost = function() {
      $scope.blogPosts.$add({
        postTitle: $scope.newPostTitle,
        postContent: $scope.newPostContent,
        createdOn: Date.now(),
        comments: [],
        like: 0,
        shares: 0,
      });
    };
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="blog">
  <div class="android-more-section" ng-controller="BlogCtrl">
    <div class="android-card-container mdl-grid">
      <div class="mdl-cell mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-cell--12-col mdl-card mdl-shadow--3dp mdl-grid" ng-repeat="post in blogPosts">
        <div class="mdl-cell mdl-cell--12-col-phone mdl-cell--8-col-tablet mdl-cell--9-col">
          <h4 style="margin-bottom: 0em;color: #CE06D1;line-height: 20px;margin-bottom: 1em;">{{ post.postTitle }}
          <br>
          <sub><sub>Posted by Admin</sub></sub>
          <!--<sub><sub>Posted 2 days ago by Admin</sub></sub>-->
        </h4>
          <p>{{ post.postContent }}</p>
          <button style="margin-top: -1em;color: #9C27B0;border: 1px solid;" class="mdl-button mdl-js-button mdl-js-ripple-effect">read more</button>

        </div>
      </div>
      <div class="mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp">
        <form ng-submit="addPost()">
          <input ng-model="newPostTtitle" />
          <input ng-model="newPostContent" />
          <button type="submit">Add Post</button>
        </form>
      </div>
    </div>
  </div>

here is the error I am getting;

Error: Key postTitle was undefined. Cannot pass undefined in JSON. Use null instead.
f.toJSON/<@https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js:12:22073
r@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:7:406
f.toJSON@https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js:12:21892
d.prototype.$add@https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js:12:2070
$scope.addPost@http://localhost/eventables/js/main.js:116:1
ib.prototype.functionCall/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:199:301
Ec[c]</<.compile/</</f@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:216:74
Pe/this.$get</n.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:11
Pe/this.$get</n.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:126:236
Ec[c]</<.compile/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js:216:124
n.event.dispatch@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:3:7467
n.event.add/r.handle@https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js:3:5583
 angular.min.js:102:325

Answer 1

I just changed the variable names in the controller and also the HTML, a separate variable name for the $scope.blogsposts.$add

 .controller("BlogCtrl", function($scope, $firebaseArray) { console.log("i rock oOO"); var ref = new Firebase("https://eventables.firebaseio.com/blog"); // create a synchronized array $scope.blogPosts = $firebaseArray(ref); // add new items to the array // the message is automatically added to our Firebase database! $scope.addPost = function() { $scope.blogPosts.$add({ title: $scope.new_title, content: $scope.new_content, createdOn: Date.now(), comments: [], like: 0, shares: 0, }); }; }); 

 <div class="android-more-section" ng-controller="BlogCtrl"> <div class="android-section-title mdl-typography--display-1-color-contrast">Interesting Updates and News from Eventables</div> <div class="android-card-container mdl-grid"> <div class="mdl-cell mdl-cell--12-col-phone mdl-cell--12-col-tablet mdl-cell--12-col mdl-card mdl-shadow--3dp mdl-grid" ng-repeat="post in blogPosts"> <div class="mdl-cell mdl-cell--12-col-phone mdl-cell--4-col-tablet mdl-cell--3-col mdl-card mdl-shadow--3dp"> <img src="images/card_2.jpg" style="width: 100%; height: 100%"> </div> <div class="mdl-cell mdl-cell--12-col-phone mdl-cell--8-col-tablet mdl-cell--9-col"> <h4 style="margin-bottom: 0em;color: #CE06D1;line-height: 20px;margin-bottom: 1em;">{{ post.title }} <br> <sub><sub>Posted by Admin</sub></sub> <!--<sub><sub>Posted 2 days ago by Admin</sub></sub>--> </h4> <p>{{ post.content }}</p> <!--<p>Excepteur reprehenderit sint exercitation ipsum consequat qui sit id velit elit. Velit anim eiusmod labore sit amet. Voluptate voluptate irure occaecat deserunt incididunt esse in. Qui ullamco consectetur aute fugiat officia ullamco proident Lorem ad irure. Sint eu ut consectetur ut esse veniam laboris adipisicing aliquip minim anim labore commodo.</p>--> <button style="margin-top: -1em;color: #9C27B0;border: 1px solid;" class="mdl-button mdl-js-button mdl-js-ripple-effect">read more</button></p> </div> </div> <div class="mdl-cell mdl-cell--12-col mdl-cell--4-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--3dp"> <div class="mdl-card__media first-post-card-bg"> <h3 class="title">Fashola Weds bunmi</h3> </div> <form ng-submit="addPost()"> <input ng-model="new_title" /> <input ng-model="new_content" /> <button type="submit">Add Post</button> </form> </div> </div> </div>