Угловые/Rails получают последние сохраненные данные из таблицы

Question

Я новичок в AngularJS, и я пытаюсь включить Angular в мое уже построенное приложение Rails. В моем приложении rails есть возможность отправлять сообщения в фид. У меня угловая работа, поэтому он извлекает фид, а также записывает последнюю запись в фид.

Моя проблема заключается в том, что она публикует только содержимое формы. Я также хочу получить идентификатор пользователя, чтобы я мог отображать имя пользователя, профиль pic и т. Д. Эта информация появляется, когда я обновляю страницу, но не показываю сразу после того, как сообщение происходит, только содержимое сообщения показывает ,

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 = {} 
] 

microposts контроллер

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> 

Answer 1

Я не знаком с coffescript. Если он загружается в данные на перезагрузке страницы, я бы просто добавил вызов любой функции, запускающей ее в стек вызовов $ 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 
     } 
    }); 
}]);