How to get post.id elsewhere in angularjs code with ng-repeat?

Question

JavaScript

<div data-ng-repeat="post in posts>

<div>{{post.id}}</div>
<div>{{post.title}}</div>
<div class="load-comments" data-ng-model="comments" data-ng-click="loadComments(post)">load-comments</div>
</div>

Loading comments:

$scope.loadComments = function (post) {
            CommentsService.comments({post_id: post.id}).$promise.then(function (data) { //сервис для получения коментов
                $scope.comments = data.results; /тут данные в json
    

            });

We display comments somewhere else and add a form to add a comment:

<div data-ng-repeat="comment in comments" class="ng-scope">
                                    <div class="ng-binding">{{comment.id}}</div>
                                    <div class="ng-binding">{{comment.id}}</div>
                                </div>
<input type="text" placeholder="Add a comment..." data-ng-model="viewModel.commentText" data-ng-disabled="viewModel.isCommentSending" class="ng-pristine ng-valid">

The functionality of adding a comment:

$scope.addComment = function (post) {
            console.log(post);
            return CommentsService.createComment({
                text: $scope.viewModel.commentText,
                post_id: post.id

            }).then(function (comment) {

                $scope.post.comments.unshift(comment);
                $scope.post.comment_count++;
                $scope.viewModel.commentText = '';
                console.log(123123, comment, $scope.post.comments);
            }).finally(function () {
                $scope.viewModel.isCommentSending = false;
            });

        };

And here's the question: how to pass post.id to $scope.addComment if the forms are in different places. Well, that is, if it was one block, then there is post.id with ng-repeat, and if I left with ng-repeat, then how to get the id?
Sorry, it's stupid somehow it turned out to tell, but I hope you understand what the problem is. Thanks in advance.

Answer 1

The simplest and, in my opinion, the correct way - directives. You can isolate everything related to one post inside a directive.
Within this directive, you can already display comments, you have access to the post itself, and so on. The problem with spinners can be solved through services - passing a directive delegate inside another one... or communicating through controllers... there are already a lot of options, as you like.
If you are using angular 1.4 then the directive will look something like this:

function singlePostViewDirective () {
    return {
        templateUrl: 'post.template.html',
        bindToController: {
            data: '=post' 
        },
        controller: function () {
             var vm = this;
             vm.addComment = function (comment) {
                 // do stuff
             }
        },
        controllerAs: 'post'
    }
}

well, in the template there will be something in the spirit

<form ng-submit="post.addComment(commentText)">
<textarea ng-model="commentText"></textarea>
<input type="submit" />
</form>

Well, you can also detail the directives, here it is more convenient for you. Let's say the form for adding a comment can be stuffed into another directive, which will only manage the UI and delegate the saving itself to a higher level through callbacks ... The point is to break everything into directives, observing the principles of single responsibility and reducing the coupling between them (of course balance, otherwise for a simple task you can pile up a lot of unnecessary things), then there will be less pain.