使用AngularJS创建帖子并推送到firebase不起作用答案

【问题标题】：Create Post and push to firebase with AngularJS not working使用AngularJS创建帖子并推送到firebase不起作用
【发布时间】：2015-05-26 01:35:24
【问题描述】：

我是 AngularJS 的新手，我正在尝试弄清楚如何在模态中创建帖子表单，并将帖子推送到 firebase。我正在拔头发。

最初，“创建帖子”是导航栏中的一个链接，可将您带到一个单独的页面 (addPost.html)，其中包含一个表单。

我想将 Create Post 表单移动到同一页面上的引导模式 (welcome.html)。

模式中有一个编辑表单，在编辑已创建的帖子时可以正常工作。删除帖子也有效。

我不知道我做错了什么。

这是我的welcome.html：

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">

<title>AngularJS & Firebase Web App</title>

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="blog.css" rel="stylesheet">

</head>

<body ng-controller="WelcomeCtrl">
  <div class="blog-masthead">
    <div class="container">
      <nav class="blog-nav">
        <a class="blog-nav-item active" href="#/welcome">Home</a>
        <a class="blog-nav-item " href="#/addPost">Add Post</a>
      </nav>
    </div>
  </div>
  <div class="container">
    <div class="page-header">
      <h1>AngularJS & Firebase App</h1>
    </div>
    <p class="lead">Welcome home <b>{{username}}</b> !!</p>

    <!-- BUTTON I CREATED TO TRIGGER THE CREATE POST MODAL -->
    <p><button class="btn btn-xs btn-info" data-toggle="modal" data-target="#createModal">CREATE</button></p>


<!-- list of articles -->
    <div class="list-group" ng-repeat="article in articles">
      <a href="#" onclick="return false;" class="list-group-item active">
        <h4 class="list-group-item-heading">{{article.title}}</h4>
        <p class="list-group-item-text">{{article.post}}</p>
        <span class="pull-right">
          <button class="btn btn-xs btn-info" ng-click="editPost(article.$id)" data-target="#editModal">EDIT</button>
          <button class="btn btn-xs btn-warning" ng-click="confirmDelete(article.$id)" data-target="#deleteModal" >DELETE</button>
        </span>
      </a>
    </div>
  </div>


<!-- footer -->
  <footer class="footer">
    <div class="container">
      <p class="text-muted"></p>
    </div>
  </footer>

<!-- create modal -->
  <div class="modal fade" id="createModal"  role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="editModalLabel">Create Post</h4>
        </div>
        <div class="modal-body">
          <form ng-submit="AddPost()">
            <div class="form-group">
              <label for="recipient-name" class="control-label">Title:</label>
              <input type="text" ng-model="article.title" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">Post:</label>
              <textarea ng-model="article.post" class="form-control" id="message-text"></textarea>
            </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
          </form>
        </div>
      </div>
    </div>
  </div> 


<!-- edit modal -->
  <div class="modal fade" id="editModal"  role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title" id="editModalLabel">Update Post</h4>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="form-group">
              <label for="recipient-name" class="control-label">Title:</label>
              <input type="text" ng-model="postToUpdate.title" class="form-control" id="recipient-name">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">Post:</label>
              <textarea ng-model="postToUpdate.post" class="form-control" id="message-text"></textarea>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" ng-click="update()">Publish</button>
        </div>
      </div>
    </div>
  </div> 

<!-- delete modal -->
  <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header" style="text-align:center;">
          <h4 class="modal-title" style="color:red;" id="deleteModalLabel">You are going to Delete this post forever !!</h4>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" ng-click="deletePost()">Delete</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

这是我的 welcome.js：

'use strict';

angular.module('myApp.welcome', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/welcome', {
    templateUrl: 'welcome/welcome.html',
    controller: 'WelcomeCtrl'
  });
}])


.controller('WelcomeCtrl', ['$scope','$firebase','CommonProp', function($scope,$firebase,CommonProp) {
    $scope.username = CommonProp.getUser();
    var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
  var sync = $firebase(firebaseObj);
  $scope.articles = sync.$asArray();

  $scope.editPost = function(id) {
    var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles/" + id);
    var syn = $firebase(firebaseObj);
    $scope.postToUpdate = syn.$asObject();
    $('#editModal').modal();      // triggers the modal pop up
  };



$scope.update = function() {
  var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + $scope.postToUpdate.$id);
  var article = $firebase(fb);
  article.$update({
    title: $scope.postToUpdate.title,
    post: $scope.postToUpdate.post,
    emailId: $scope.postToUpdate.emailId
  }).then(function(ref) {
    $('#editModal').modal('hide');
  }, function(error) {
    console.log("Error:", error);
  });
};

$scope.confirmDelete = function(id) {
  var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + id);
  var article = $firebase(fb);
  $scope.postToDelete = article.$asObject();
  $('#deleteModal').modal();
};

$scope.deletePost = function() {
  var fb = new Firebase("https://yyear.firebaseio.com/Articles/" + $scope.postToDelete.$id);
  var article = $firebase(fb);
  article.$remove().then(function(ref) {
    $('#deleteModal').modal('hide');
  }, function(error) {
    console.log("Error:", error);
  });
};

$scope.AddPost = function(){
    console.log("This was called.");
   var title = $scope.article.title;
   var post = $scope.article.post;

   var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
   var fb = $firebase(firebaseObj);

   fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
    console.log(ref); 
    //$location.path('/welcome');
  }).then(function(ref) {
    $('#editModal').modal('hide');
  }, function(error) {
    console.log("Error:", error);
  });
};
}]);

addPost.html 中的原始Create Post 表单如下所示：

<body ng-controller="AddPostCtrl">
  <div class="blog-masthead">
    <div class="container">
      <nav class="blog-nav">
        <a class="blog-nav-item " href="#/welcome">Home</a>
        <a class="blog-nav-item active" href="#/addPost">Add Post</a>
      </nav>
    </div>
  </div>

  <div class="container" >
    <form class="form-horizontal" ng-submit="AddPost()">
      <fieldset>
        <legend>Create Post</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" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">
          </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" ng-model="article.post" name="txtPost" ></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="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
          </div>
        </div>
      </fieldset>
    </form>
  </div><!-- /.container -->

addPost.js 文件如下所示。

'use strict';

angular.module('myApp.addPost', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/addPost', {
    templateUrl: 'addPost/addPost.html',
    controller: 'AddPostCtrl'
  });
}])

.controller('AddPostCtrl', ['$scope','$firebase','$location','CommonProp',function($scope,$firebase,$location,CommonProp) {
  $scope.AddPost = function(){
   var title = $scope.article.title;
   var post = $scope.article.post;

   var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
   var fb = $firebase(firebaseObj);

   fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
    console.log(ref); 
    $location.path('/welcome');
  }, function(error) {
    console.log("Error:", error);
  });

 }
}]);

我假设如果我将 addPost 函数从 addPost.js 复制到 welcome.js 文件，然后在 welcome.html 中复制编辑表单 并对其进行了修改，使其类似于 addPost.html 中的 Create Post 表单。

显然不是，但我不知道我做错了什么。

模态框弹出，但发布按钮不做任何事情

【问题讨论】：

标签： html angularjs twitter-bootstrap firebase

【解决方案1】：

我想通了。首先，在我的创建帖子模式中，我的结束表单标记位于错误的位置。

创建帖子模式应该是这样的：

<div class="modal fade" id="createModal"  role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form  ng-submit="AddPost()">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="editModalLabel">Create Post</h4>
          </div>
          <div class="modal-body">
            <!-- Text input-->
            <div class="form-group">
              <label class="control-label" for="txtTitle">Title</label>  
              <input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">
            </div>
            <!-- Textarea -->
            <div class="form-group">
              <label class="control-label" for="txtPost">Post</label>   
              <textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
            </div>
            <!-- Button -->
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
          </div>
        </form>
      </div>
    </div>
  </div>

我的 welcome.js 中的 addPost 函数应该是这样的：

$scope.AddPost = function(){
    console.log("This was called.");
   var title = $scope.article.title;
   var post = $scope.article.post;

   var firebaseObj = new Firebase("https://yyear.firebaseio.com/Articles");
   var fb = $firebase(firebaseObj);

   fb.$push({ title: title,post: post,emailId: CommonProp.getUser() }).then(function(ref) {
    console.log(ref); 
    //$location.path('/welcome');
   }).then(function(ref) {
    $('#createModal').modal('hide');
  }, function(error) {
    console.log("Error:", error);
  });
};

【讨论】：