Невозможно получить от администратора сообщение о комментариях - Приложение AngularJS

Question

Я пытаюсь получить контроллер PostsCtrl для отображения комментариев, которые у меня есть в функции addPost, которая находится в MainCtrl. Моя цель - опубликовать комментарии (в правой панели), связанные с сообщением (в левой панели). Я что-то не инициализировал, или что-то не хватает в моей функции addComment?

--- 
name: home 
url:/
--- 
<br> 
<div class="grid-container"> 
    <div class="grid-block"> 
     <div class="grid-block"> 

     <div id="chatBlock" class="small-12 medium-8 grid-content medium-order-1"> 
      <div class="card"> 
      <div ng-repeat="post in posts | orderBy: '-upvotes'" class="card-section"> 
       <a ng-click="incrementUpvotes(post)"><img zf-iconic="" icon="thumb" size="medium"></a> 
       <a ng-show="post.link" href="{{post.link}}"> 
       {{post.title}} 
       </a> 
       <span ng-hide="post.link" class=""> 
       {{post.title}} 
       </span> | <span ng-model="post.upvotes">upvotes: </span><span class="success badge">{{post.upvotes}}</span> 
       <span> 
        <a href="#/posts/{{$index}}">Comments</a> 
       </span> 
      </div> 
      </div> 
     <br> 
     <form ng-submit="addPost(post)"> 
      <input type="text" ng-model="post.title" placeholder="Add post..."></input> 
      <br> 
      <input type="text" ng-model="post.link" placeholder="Add link..."></input> 
      <br> 
      <button type="submit" class="large button">Post</button> 
     </form> 
     </div> 
     </div> 

     <div class="grid-block"> 
     <div id="contacts" class="small-12 medium-4 grid-content medium-order-2"> 
      <div ng-controller="PostsCtrl"> 

      <div class="page-header"> 
       <h3> 
       <a ng-show="post.link" href="{{post.link}}"> 
        {{post.title}} 
       </a> 
       <span ng-hide="post.link"> 
        {{post.title}} 
       </span> 
       </h3> 
      </div> 

      <div ng-repeat="comment in post.comments | orderBy:'-upvotes'"> 
       <span class="glyphicon glyphicon-thumbs-up" 
       ng-click="incrementUpvotes(comment)">+</span> 
       {{comment.upvotes}} - by {{comment.author}} 
       <span style="font-size:20px; margin-left:10px;">{{comment.body}}</span> 
      </div> 

      <form ng-submit="addComment()"> 
       <h3>Add a new comment</h3> 

       <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Comment" ng-model="body"></input> 
       </div> 
       <button type="submit" class="btn btn-primary">Post</button> 
      </form> 

      </div> 
     </div> 
     </div> 

    </div> 
    </div> 
</div> 

app.js

(function() { 
    'use strict'; 

    angular.module('chatter', [ 
    'ui.router', 
    'ngAnimate', 

    //foundation 
    'foundation', 
    'foundation.dynamicRouting', 
    'foundation.dynamicRouting.animations' 
    ]) 
    .factory('posts', [function(){ 
     var o = { 
     posts: [] 
     }; 
     return o; 
    }]) 
    .config(config) 
    .run(run) 

    // inject posts service into main controller 
    .controller('MainCtrl', [ 
     '$scope', 'posts', 
     function($scope, posts){ 
     // bind $scope.posts to posts array in factory 
     $scope.posts = posts.posts; 
     $scope.body = posts.body; 
     $scope.test = 'Comments'; 

     $scope.addPost = function(post){ 
      if(!post.title || post.title === '') { return; } 
      if(!post.upvotes) { post.upvotes = 0 } 
      $scope.posts.push({ 
      title: post.title, 
      link: post.link, 
      upvotes: post.upvotes, 
      comments: post.comments, 
      comments: [ 
       {author: 'Joe', body: 'Cool post!', upvotes: 0}, 
       {author: 'Todd', body: 'This is a crappy post!', upvotes: 2} 
      ] 
      }); 
      post.title = ''; 
      post.link = ''; 
     }; 
     $scope.incrementUpvotes = function(post) { 
      post.upvotes += 1; 
     }; 
    }]) 
    // Posts controller 
    .controller('PostsCtrl', [ 
     '$scope', 
     '$stateParams', 
     'posts', 
     function($scope, $stateParams, posts){ 
     $scope.post = posts.posts[$stateParams.id]; 
     $scope.posts.comments = posts.posts.comments; 

     $scope.addComment = function(comment){ 
      if(!comment.body === '') { return; } 
      $scope.comments.push({ 
      body: comment.body, 
      author: 'user', 
      upvotes: 0 
      }); 
      comment.body = ''; 
     }; 
    }]) 

    config.$inject = ['$urlRouterProvider', '$locationProvider']; 

    function config($urlProvider, $locationProvider) { 
    $urlProvider.otherwise('/'); 

    $locationProvider.html5Mode({ 
     enabled:false, 
     requireBase: false 
    }); 

    $locationProvider.hashPrefix('!'); 
    } 

    function run() { 
    FastClick.attach(document.body); 
    } 

})(); 

Answer 1

Вы звоните addComment без прохождения в переменной в качестве первого параметра здесь:

<form ng-submit="addComment()"> 

Но функция addComment ожидает параметр:

$scope.addComment = function(comment){ 
    if(!comment.body === '') { return; } 
      // ^^^^^ undefined because you didn't pass it in. 

Вместо этого вы должны изменить addComment, чтобы посмотреть на данные, которые находятся на области, которая изменяется на входы.

Обновление входной шаблон выглядеть следующим образом:

<input type="text" class="form-control" placeholder="Comment" ng-model="comment.body"></input> 

Тогда просто посмотрите на объем:

$scope.comment = {}; 
$scope.addComment = function(){ 
    if(!this.comment.body === '') { return; }