Не может отправлять и получать данные от 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. $ Добавить

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