无法从 Firebase 发送和接收数据

Question

我正在尝试用 angularjs+firebase 构建一个博客 现在我发现很难从 firebase 发送和获取帖子 这是我尝试过的

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

这是我得到的错误；

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

我刚刚更改了控制器中的变量名以及 HTML，$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>