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>

无法从firebase发送和接收数据

1 个答案: