I'm following this tutorial When I try to post a comment on a post I get a TypeError: Cannot read property 'comments' of undefined
error in my console.
the mainCtrl,
.controller('mainCtrl', ['$scope', 'posts',
function($scope, posts){
$scope.posts = posts.posts;
$scope.addPost = function(){
if(!$scope.title || $scope.title === '') { alert("Field can't left blank"); return; }
$scope.posts.push({
title: $scope.title,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
};
}
])
and the postCtrl,
.controller('PostsCtrl', ['$scope', '$stateParams', 'posts',
function($scope, $stateParams, posts){
$scope.post = posts.posts[$stateParams.id];
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}
])
Both controllers are in mainCtrl.js
.
And here are my home.html and post.html partials which are being included through router-ui.
%script{:id => "/home.html", :type => "text/ng-template"}
%h1
Flappernews
%a{:href => "#/posts/{{$index}}"} Comments
%script{:id => "/posts.html", :type => "text/ng-template"}
%h2
Below here should be comments
%span
{{ post.comments }}
%div{"ng-repeat" => "comment in post.comments | orderBy:'-upvotes'"}
{{comment.upvotes}} - by {{comment.author}}
%span{:style => "font-size:20px; margin-left:10px;"}
{{comment.body}}
%form{"ng-submit" => "addComment()"}
%h3 Add a new comment
.form-group
%input.form-control{"ng-model" => "body", :placeholder => "Comment", :type => "text"}
%button.btn.btn-primary{:type => "submit"} Post
When I visit the homepage I get redirected to localhost:3000/#/home
I can then enter a title and post it. When I click on the comments
link I get redirected to http://localhost:3000/#/posts/
and when I try to post a comment I get the
TypeError: Cannot read property 'comments' of undefined
at Scope.$scope.addComment
error.
You have defined two separate controllers, don't need to do that. If you look at that tutorial again you will see that addPost and addComment functions are inside single controller like this
.controller('PostsCtrl', [
'$scope',
'$stateParams',
'posts',
function($scope, $stateParams, posts){
// Fetch post object from state parameter.
$scope.post = posts.posts[$stateParams.id];
// Add Post.
$scope.posts.push({
title: $scope.title,
link: $scope.link,
upvotes: 0,
comments: [
{author: 'Joe', body: 'Cool post!', upvotes: 0},
{author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
]
});
// Add comment.
$scope.addComment = function(){
if($scope.body === '') { return; }
$scope.post.comments.push({
body: $scope.body,
author: 'user',
upvotes: 0
});
$scope.body = '';
};
}]);
add post and comment works on single Post object where comments property is pre defined.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With