除非重新加载页面，否则简单的Angular rails博客无法发布

Question

问题是我有一个超级简单的角度轨道应用程序。但由于某些原因，我的角度数据（POST）不会显示在我的表中，直到我手动重新加载页面。非常感谢帮助我解决这个问题！

这是我的角色。

var post = angular.module('Post', ['ngResource']);

post.factory("Post", function($resource) {
 return $resource("post/:id", { id: '@id' }, {
    index:   { method: 'GET', isArray: true, responseType: 'json' },
    update:  { method: 'PUT', responseType: 'json' }
 });
})


post.controller("PostController", function($scope, $http, Post) {
  $scope.posts = Post.index()

  $scope.addPost = function() {
   post = Post.save($scope.newPost)

   $scope.posts.push(Post)
   $scope.newPost = {}
  }

  $scope.deletePost = function(index) {

    post = $scope.posts[index]
    Post.delete(post)
    $scope.posts.splice(index, 1);
 }
})

这是我的Rails内容

class PostController < ApplicationController


  before_action :authenticate_user!

  layout 'angular'

  respond_to :json

  def index
    respond_to do |format|
      format.json { render json: Post.all }
      format.html
    end
  end

  def create
    respond_with Post.create(post_params)
  end

  def destroy
    respond_with Post.destroy(params[:id])
  end

  private

  def post_params
    params.require(:post).permit(:id, :created_at, :updated_at, :post_text, :user, :SUBJECT, :FIRST_NAME, :LAST_NAME, :EMAIL)
  end
 end

配置/ routes.rb中

Rails.application.routes.draw do

  devise_for :users, controllers: { sessions: 'sessions' }


  root to: 'post#index'

  #angular route
  resources :post, only: [:index, :create, :destroy], defaults: {format: :json}
  end 
end 

我的观点

%ul.nav.nav-pills.pull-left
  %li.active
    %a{:href => "home", :class => 'val_class'} Home

.container{"ng-app" => "Post"}
  %h1 Recent Post
  %div{"ng-controller" => "PostController"}
    .well
      %h3 Add a new post
      %form{"ng-submit" => "addPost()"}
        .row
          .col-xs-6
            %input.form-control{"ng-model" => "newPost.FIRST_NAME", :placeholder => "First Name", :type => "text"}/
          .col-xs-6
            %input.form-control{"ng-model" => "newPost.LAST_NAME", :placeholder => "Last Name", :type => "text"}/
        .row
          .col-xs-12
            %br/
            %input.form-control{"ng-model" => "newPost.SUBJECT", :placeholder => "Subject", :type => "text"}/
        .row
          .col-lg-12
            %br/
            %input.form-control{"ng-model" => "newPost.post_text", :placeholder => "Post Text", :type => "text"}/

        .row
          .col-xs-12.text-center
            %br/
            %input.btn.btn-primary{:type => "Submit", :value => "Add Post"}/

      %table.table.table-bordered.trace-table
        %thead
          %tr.trace-table
            %th.ts.jp{:style => 'border: solid black;'} First Name
            %th.ts.jp{:style => 'border: solid black;'} Last Name
            %th.ts.jp{:style => 'border: solid black;'} Post
            %th.ts.jp{:style => 'border: solid black;'} Subject
            %th.ts.jp{:style => 'border: solid black;'} Delete

        %tr.trace-table
          %tr{"ng-repeat" => "post in posts track by $index"}
            %td.trace-table{:style => 'border: solid black;'} {{ post.FIRST_NAME }}
            %td.trace-table{:style => 'border: solid black;'} {{ post.LAST_NAME }}
            %td.trace-table{:style => 'border: solid black;'} {{ post.post_text }}
            %td.trace-table{:style => 'border: solid black;'} {{ post.SUBJECT }}
            %td.trace-table{:style => 'border: solid black;'}
              %a.btn.btn-danger{"ng-click" => "deletePost($index)"} _

视觉显示我在说什么

我提交帖子后

我提交帖子后重新加载手册页

Answer 1

更改addPost功能，如下所示：

$scope.addPost = function() {
   post = Post.save($scope.newPost)

   $scope.posts.push($scope.newPost)
   $scope.newPost = {}
}

或者你可以使用Post.save的回报更安全，因为你可能无法保存帖子。

$scope.addPost = function() {
   post = Post.save($scope.newPost)
   post.$promise.then(function(res) {
      $scope.posts.push(res)
      $scope.newPost = {}
   }, function(res) {
     //Handle error
   })
}