Question

我有添加新评论的代码，但“回复评论”功能无法正常使用。如果我在单击reply()时按表单添加注释，则仅在现有注释内/下添加五次。

这是我的代码：

HTML：

<div class="comments-app" ng-app="addCommentsApp" ng-controller="AddCommentsController as commCtrl">

  <div class="comments">

    <div class="comment" hide-me="5000" ng-repeat="comment in commCtrl.comments | orderBy: 'date'">

      <div class="comment-box">
        <div class="comment-footer">
          <div class="comment-info">
            <span class="comment-date">{{ comment.date | date: 'medium' }}</span>
          </div>

          <div class="comment-actions">
            <a ng-click="reply()">Reply</a>
          </div>
        </div>
        <div class="comment-text">{{ comment.text }}</div>
      </div>
    </div>
  </div>
  <!-- From -->
  <div class="comment-form">

    <form class="form" name="form" ng-submit="form.$valid && commCtrl.addComment()" novalidate>
      <div class="form-row">
        <textarea
                  class="input"
                  ng-model="commCtrl.comment.text"
                  placeholder="Add comment..."
                  required></textarea>
      </div>

      <div class="form-row">
        <input type="submit" value="SEND">
      </div>
    </form>
  </div>
</div>

JavaScript的：

(function(){
  'use strict';

 var myApp = angular.module('addCommentsApp', []);
    myApp.controller('AddCommentsController', AddCommentsController);

  // Inject $scope dependency.
  AddCommentsController.$inject = ['$scope', '$timeout'];

  // Declare AddCommentsController.
  function AddCommentsController($scope, $timeout) {
    var vm = this;

    // Current comment.
    vm.comment = {};

    // Array where comments will be.
    vm.comments = [];

    // Fires when form is submited.
    vm.addComment = function() {

      // Add current date to the comment.
      vm.comment.date = Date.now();

      vm.comments.push( vm.comment );
      vm.comment = {};

      // Reset clases of the form after submit.
      $scope.form.$setPristine();
    }
  }

})();

CSS：

.comment-form .form .input{
  background-color: #fcfcfc;
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
  color: #555f77;
  font-family: inherit;
  font-size: 14px;
  padding: 5px 10px;
  outline: none;
  width: 100%;
}

.comment-form .form textarea.input{
  height: 100px;
  padding: 15px;
}

.comment-form .form input[type=submit]{
  background-color: #555f77;
  border: none;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
  color: #fff;
  cursor: pointer;
  display: block;
  margin-left: auto;
  outline: none;
  padding: 6px 15px;
}

.comment-form .form .input.disabled {
    background-color: #E8E8E8;
}

.comment-form,
.comment{
  margin-bottom: 20px;
  position: relative;
  z-index: 0;
}

.comment .comment-box{
  background-color: #fcfcfc;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15);
  margin-left: 100px;
  min-height: 60px;
  position: relative;
  padding: 15px;
}

.comment .comment-box:before,
.comment .comment-box:after{
  border-width: 10px 10px 10px 0;
  border-style: solid;
  border-color: transparent #FCFCFC;
  content: "";
  left: -10px;
  position: absolute;
  top: 20px;
}

.comment .comment-box:before{
  border-color: transparent rgba(0, 0, 0, .05);
   top: 22px;
}

.comment .comment-footer:after{
  content: "";
  display: table;
  clear: both;
}

.comment .comment-footer a{
  color: #acb4c2;
  text-decoration: none;
}

.comment .comment-footer a:hover{
  color: #555f77;
  text-decoration: underline;
}

.comment .comment-info{
  float: left;
  width: 85%;
}

.comment .comment-date:before{
  content: "|";
  margin: 0 10px;
}

.comment-actions{
  float: left;
  text-align: right;
  width: 15%;
}

https://jsfiddle.net/kurzalowski/eefyap1y/

还有一个小提琴

Answer 1

由于我检查了您的代码，因此您未在控制器中定义 reply（）功能。

Answer 2

您可以将repliedComments数组添加到评论对象中 -

vm.comment = {};
vm.comment.repliedComments=[]; /// here you can maintain the replied comments of your object.

最好通过一些独特的ID维护您的评论，以便您可以轻松维护回复的评论。

Answer 3

您可以将addComment更改为：

vm.addComment = function(oldComment) {
  if (oldComment !== undefined) {

    oldComment.comment.date = Date.now();

    if (!oldComment.comments) {
      oldComment.comments = [];
    }

    oldComment.comments.push({
      text: oldComment.comment.text,
      date: oldComment.comment.date
    });        
  } else {
    // Add current date to the comment.
    vm.comment.date = Date.now();
    vm.comments.push(vm.comment);
    vm.comment = {};        
  }
// Reset clases of the form after submit.
    $scope.form.$setPristine();

所以结构将是：

[
  {
    "text": "sdsd",
    "date": 1504440173932,
    "showReply": true,
    "comment": {
      "text": "aaaaa2",
      "date": 1504440258984
    },
    "comments": [
      {
        "text": "aaaaa",
        "date": 1504440176459
      },
      {
        "text": "aaaaa2",
        "date": 1504440258984
      }
    ]
  }
]

Demo Fiddle

完整的HTML

<div class="comments-app" ng-app="addCommentsApp" ng-controller="AddCommentsController as commCtrl">

  <div class="comments">

    <div class="comment" hide-me="5000" ng-repeat="comment in commCtrl.comments | orderBy: 'date'">

      <div class="comment-box">
        <div class="comment-footer">
          <div class="comment-info">
            <span class="comment-date">{{ comment.date | date: 'medium' }}</span>
          </div>

          <div class="comment-actions">
            <a href="" ng-click="commCtrl.reply(comment)">Reply</a>

            <div ng-if="comment.showReply">
              <div class="comment" hide-me="5000" ng-repeat="subcomment in comment.comments | orderBy: 'date'">

                <p>{{subcomment.text}}</p>

              </div>

              <form class="form" name="form" ng-submit="form.$valid && commCtrl.addComment(comment)" novalidate>
                <div class="form-row">
                  <textarea class="input" ng-model="comment.comment.text" placeholder="Add comment..." required></textarea>
                </div>

                <div class="form-row">
                  <input type="submit" value="SEND">
                </div>
              </form>

            </div>
          </div>
          <div class="comment-text">{{ comment.text }}</div>
        </div>
      </div>
    </div>
    <!-- From -->
    <div class="comment-form">

      <form class="form" name="form" ng-submit="form.$valid && commCtrl.addComment()" novalidate>
        <div class="form-row">
          <textarea class="input" ng-model="commCtrl.comment.text" placeholder="Add comment..." required></textarea>
        </div>

        <div class="form-row">
          <input type="submit" value="SEND">
        </div>
      </form>

    </div>   
  </div>

角度添加功能回复评论

3 个答案: