Angularjs ReferenceError: post is not defined

Question

I'm working on a simple app that create posts and comments to learn how to create ROR apps implemented with Angularjs.

I'm finding a problem as I'm trying to make my addComment function work. Seems like the variable that holds the expected object is not defined. At least this is the message I got from network inspection

 ReferenceError: post is not defined
at k.$scope.addComment (http://localhost:3000/javascripts/app.js:99:34)
at bb.functionCall (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:176:141)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:193:165
at k.$get.k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:112:319)
at k.$get.k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:113:48)
at HTMLFormElement.<anonymous> (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:193:147)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:31:225
at Array.forEach (native)
at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:7:280)
at HTMLFormElement.c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:31:207)angular.js:9959 (anonymous function)angular.js:7298 $getangular.js:12695 $get.k.$applyangular.js:18941 (anonymous function)angular.js:2822 (anonymous function)angular.js:325 qangular.js:2821 

If someone can se a problem in my code that points to this error please let me know.

follows my code

angular.module('flapperNews', ['ui.router'])
    //Provider
    .config([
        '$stateProvider',
        '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {

            $stateProvider
                .state('home', {
                    url: '/home',
                    templateUrl: '/home.html',
                    controller: 'MainCtrl',
                    resolve: {
                        postPromise: ['posts', function(posts){
                            return posts.getAll();
                        }]
                    }
                })
                .state('posts', {
                    url: '/posts/{id}',
                    templateUrl: '/posts.html',
                    controller: 'PostsCtrl',
                    resolve: {
                        postPromise: ['posts', function(posts){
                            return posts.getAll();
                        }]
                    }
                })

            $urlRouterProvider.otherwise('home');
        }])
    //Posts service
    .factory('posts', ['$http', function($http){

        var o = {
            posts: []
        };

        o.getAll = function() {
            return $http.get('/posts.json').success(function(data){
                angular.copy(data, o.posts);
            });
        };
        o.create = function(post) {
            return $http.post('/posts.json', post).success(function(data){
                o.posts.push(data);
            });
        };


        o.addComment = function(id, comment) {
            return $http.post('/posts/' + id + '/comments.json', comment);
        };

        return o;

    }])

    //Main Controller
    .controller('MainCtrl', [
        '$scope',
        'posts',

        function($scope, posts){
            $scope.posts = posts.posts;
            $scope.addPost = function(){
                if(!$scope.title  || $scope.title == '') { return; }
                posts.create({
                    title: $scope.title,
                    link: $scope.link
                });
                $scope.title = '';
                $scope.link = '';
            };
            $scope.incrementUpvotes = function(post) {
                post.upvotes += 1;
            };

        }])
    //Posts Controller
    .controller('PostsCtrl', [
        //the $scope declares that it will have elements visible in the view
        '$scope',
        '$stateParams',
        //the posts under is the service
        'posts',
        function($scope, $stateParams, posts){

            $scope.post = posts.posts[$stateParams.id];

            $scope.addComment = function(){
                if($scope.body === '') { return; }
                posts.addComment( post.id, {
                    body: $scope.body,
                    author: 'user'
                }).success(function(comment){

                $scope.post.comments.push(comment);
                });
                $scope.body = '';
            };}]);

and the html

    <!DOCTYPE html>
<html>
<head>


  <title>FlapperNews</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="javascripts/app.js"></script>
  <script src="javascripts/application.js"></script>

  <%= csrf_meta_tags %>
</head>
<body ng-app="flapperNews">
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <ui-view></ui-view>
  </div>
</div>

<script type="text/ng-template" id="/home.html">
  <div class="page-header">
    <h1>Flapper News</h1>
  </div>

  <div ng-repeat="post in posts | orderBy:'-upvotes'">
      <span class="glyphicon glyphicon-thumbs-up"
            ng-click="incrementUpvotes(post)"></span>
    {{post.upvotes}}
      <span style="font-size:20px; margin-left:10px;">
        <a ng-show="post.link" href="{{post.link}}">
          {{post.title}}
        </a>
        <span ng-hide="post.link">
          {{post.title}}
        </span>
      </span>
      <span>
        <a href="#/posts/{post.id}}">Comments</a>
      </span>
  </div>

  <form ng-submit="addPost()"
        style="margin-top:30px;">
    <h3>Add a new post</h3>

    <div class="form-group">
      <input type="text"
             class="form-control"
             placeholder="Title"
             ng-model="title">
    </div>
    <div class="form-group">
      <input type="text"
             class="form-control"
             placeholder="Link"
             ng-model="link">
    </div>
    <button type="submit" class="btn btn-primary">Post</button>
  </form>
</script>

<script type="text/ng-template" id="/posts.html">
  <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()"
        style="margin-top:30px;">
    <h3>Add a new comment</h3>

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

</script>

</body>
</html>

Answer 1

I think the problem is here <a href="#/posts/{post.id}}">Comments</a> . You missed { . Because of which it is unable to find the stateparam id , which you are using to create post object on controller's scope.