javascript - 除非重新加载页面，否则简单的 Angular Rails 博客无法显示帖子

Question

问题是我有一个 super 简单的 Angular 轨应用程序。但由于某种原因，在我手动重新加载页面之前，我的 Angular 数据(POST)不会显示在我的表格中。任何帮助我解决这个问题的帮助将不胜感激!

这是我的 Angular 东西。

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

config/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
   })
}