Как при ng-repeat получить post.id в другом месте кода в angularjs?

Question

[jack3d]

<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>

Грузим коменты:

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

            });

Выводим где-то в другом месте коменты и добавляем форму добавить комент:

<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">

Сам функционал добавления комента:

$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;
            });

        };

И вот вопрос: как передать в $scope.addComment post.id если формы в разных местах. Ну то есть ли бы это был один блок, то post.id при ng-repeat есть, а если я вышел с ng-repeat, то как получить id?

Сорри, тупо как-то получилось рассказать, но надеюсь вы поймете в чем проблема. Заранее спасибо.

Answer 1

[Сергей Протько]

Самый простой и, на мой взгляд, правильный способо - директивы. Вы можете изолировать все что связано с одним постов внутри директивы.

<x-single-post post="post" ng-repeat="post in posts"></x-single-post>

Внутри этой директивы вы можете уже выводить комментарии, у вас есть доступ к самому посту и т.д. Проблему со спиннерами можно решить через сервисы - передавать делегат директивы внутрь другой... или общаться через контроллеры... тут уже масса вариантов, кому как больше нравится.

Если вы используете angular 1.4 то директива будет выглядеть как-то так:

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

ну и в шаблоне будет что-то в духе

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

Ну можно еще на директивы подробить, тут как вам удобнее. Скажем форму добавления комментария можно в еще одну директиву запихнуть, которая будет только управлять UI и делигировать через колбэки само сохранение на уровень выше... Соль в том что бы разбить все на директивы соблюдая принципы единой ответственности и уменьшая между ними связанность (конечно надо соблюдать баланс, иначе для простой задачи можно нагородить много чего лишнего), тогда будет меньше боли.

Comments

[jack3d]

Я был вам очень благодарен если бы вы написали пример директивы.

[Сергей Протько]

jack3d: добавил примитивный пример.

[jack3d]

Спасибо огромное!