Angular/Rails从表中获取最后保存的数据

Angular/Rails get last saved data from table

本文关键字:最后 保存 数据 获取 Rails Angular      更新时间:2023-09-26

我是AngularJS的新手,我正在尝试将Angular集成到我已经构建的Rails应用程序中。在我的rails应用程序中有一个发布到提要的功能。我有Angular的工作,所以它检索提要,并将最新的记录发布到提要。

我的问题是它只发布表单的内容。我也想检索用户id,这样我就可以呈现出用户名、个人资料图片等。这些信息在我刷新页面时会显示,但在发布后不会立即显示,只显示帖子的内容。

microposts.js.coffee

app = angular.module('micropostApp', ['ui.router', 'ngResource'])
app.factory 'Micropost', ["$resource", ($resource) ->
  return $resource('/')
]
app.factory 'createMicropost', ["$resource", ($resource) ->
  return $resource('/microposts')
]
app.factory 'Comments', ["$resource", ($resource) ->
  return $resource('/microposts/:id/comments', id: '@id')
]
app.controller 'MicropostsController', [
  '$scope'
  'Micropost'
  'createMicropost'
  'Comments'
  ($scope, Micropost, createMicropost, Comments) ->    
    Micropost.query (data) ->
      $scope.microposts = data      
    $scope.addPost = ->
      if !$scope.newPost or $scope.newPost == ''
        return
      post = createMicropost.save($scope.newPost)
      console.log("POST: " + angular.toJson(post))
      $scope.microposts.unshift(post)
      $scope.newPost = {}
]

微柱控制器

  respond_to :json
  def create
    @micropost = current_user.microposts.create!(micropost_params)    
    respond_with @micropost
  end

查看

<div ng-app="micropostApp" ng-controller="MicropostsController">
    <div class="row"> 
        <div class="col-md-12">        
            <form ng-submit="addPost()" style="margin-top:30px;">
                <div class="form-group">
                    <input type="textarea"
                    class="form-control"
                    placeholder="Post an update..."
                    ng-model="newPost.content"></input>
                </div>
                <button type="submit" class="btn btn-primary pull-right">Post</button>
            </form>
        </div>
    </div>
<div ng-repeat="post in microposts">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <li id="{{post.id}}">
                    <div class="row">
                        <div class="col-md-12">
                            <aside>
                                <a href="/{{post.user.slug}}">{{post.user.name}}</a>
                            </aside>
                            <aside>
                                <li id="feed-fat-menu" class="dropdown pull-right feed-dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <b class="glyphicon glyphicon-chevron-down"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                    <li>Delete</li>
                                    </ul>
                                </li>
                                <span class="user"> <a href="/{{post.user.slug}}">{{post.user.name}}</a> </span>
                                <span class="content">{{post.content}}</span>
                                <hr>
                                <span class="timestamp pull-right"> Posted {{post.created_at}} ago. </span>
                                <span class="pull-left" style="padding-right: 5px;"><a>Comment </a>({{post.comments.length}})</span>
                                <span class="pull-left" style="padding-right: 5px;">
                                    <a>Likes</a> ({{post.likes.length}})
                                </span>
                                <br />
                            </aside>
                        </div>
                    </div>
                </li>
            </div>
        </div>
    </div>
</div>

我不熟悉coffescapet。如果它是在页面重载的数据中加载的,我只需要在$scope.addPost调用堆栈中添加一个对触发它的函数的调用。

$scope.addPost = function(){
   if(!$scope.newPost || $scope.newPost == ''){
    return
  }
  post = createMicropost.save($scope.newPost);
  console.log("POST: " + angular.toJson(post));
  $scope.microposts.unshift(post);
  $scope.newPost = {};
  Micropost.get();
 }
app.factory("Micropost", ["$resource", function($resource) {
    return $resource("/", {}, {
        get: {
            method: "GET",
            cache: true
        }
    });
}]);