Question

我动态创建了一个＆＃34;回复评论框＆＃34; （它现在是一个指令<reply-comment></reply-comment>）

<div class="comment-reply-wrap" ng-repeat="repUser in repUsers">
    <div class="comment">
      <div class="info" >
        <div class="left-side-info">
          <img src="img/avatar.png" alt="avatar" class="avatar">
          <span class="name">{{repUser.name}}</span>
        </div>
        <div class="right-side-info">
          <p class="user-text" ng-bind-html='repUser.text'>
            <img class="comment-image" src="">
          </p>
        </div>
        <div class="bottom">
          <span class="comment-email">{{repUser.email}}</span>
          <span class="comment-date">10/29/2010 at 6:40AM</span>
          <button type="submit" class="reply" ng-click="createReplyForm($event)">
            <i class="fa fa-reply" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

这是顶级评论框＆＃39;

<div class="comment-wrap" ng-repeat="mainComment in mainUsers">
    <div class="comment">
      <div class="info" >
        <div class="left-side-info">
          <img src="img/avatar.png" alt="avatar" class="avatar">
          <span class="name">{{mainComment.name}}</span>
        </div>
        <div class="right-side-info">
          <p class="user-text" ng-bind-html='mainComment.text'>
            <img class="comment-image" src="">
          </p>
        </div>
        <div class="bottom">
          <span class="comment-email">{{mainComment.email}}</span>
          <span class="comment-date">10/29/2010 at 6:40AM</span>
          <button type="submit" class="reply" ng-click="createReplyForm($event)"><i class="fa fa-reply" aria-hidden="true"></i></button>
        </div>
      </div>
    </div>
    <div class="cover" ng-repeat="reply in mainComment">
      <reply-comment></reply-comment>
    </div>

  </div>

控制器

var app = angular.module('commentsApp', ['ngSanitize']);

app.controller('UserController', function($scope){

$scope.mainUsers = [];
$scope.repUsers = [];
$scope.bool = false;

$scope.addUser = function() {

//Dynamically create array of objects and push data

$scope.mainUsers.push({
  name: $scope.user.name,
  email: $scope.user.email,
  homepage: $scope.user.hompage,
  text: $scope.user.text
});

//Clear input fields in main form
$scope.user.name = '';
$scope.user.email = '';
$scope.user.homepage = '';
$scope.user.text = '';
};

$scope.addRepUser = function() {
 $scope.bool = false;
 //Dynamically create array of objects and push data

  $scope.repUsers.push({
  name: $scope.repUser.name,
  email: $scope.repUser.email,
  text: $scope.repUser.text
  });



 //Clear input fields in main form
 $scope.repUser.name = '';
 $scope.repUser.email = '';
 $scope.repUser.text = '';

 };

 $scope.createReplyForm = function($event) {
 $event.currentTarget.parentNode.parentNode.parentNode.parentNode;

 $scope.bool = true;
}

})

我想插入＆＃34;回复评论＆＃34;进入＆＃34;评论＆＃34;我回复的，因为我想链接这些＆＃34;评论＆＃34;。目的是创建级联评论。

为了使这个问题更加清晰，请查看我想要的图片。

Answer 1

您需要创建同一指令的嵌套指令。

因此，您可以将此注释项目转换为指令，然后自行调用它。例如：

<div class="comment-reply-wrap" ng-repeat="repUser in repUsers">
    <div class="comment">
      <div class="info" >
        <div class="left-side-info">
          <img src="img/avatar.png" alt="avatar" class="avatar">
          <span class="name">{{repUser.name}}</span>
        </div>
        <div class="right-side-info">
          <p class="user-text" ng-bind-html='repUser.text'>
            <img class="comment-image" src="">
          </p>
        </div>
        <div class="bottom">
          <span class="comment-email">{{repUser.email}}</span>
          <span class="comment-date">10/29/2010 at 6:40AM</span>
          <button type="submit" class="reply" ng-click="createReplyForm($event)">
            <i class="fa fa-reply" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="reply">
        <my-comment-directive ng-repeat="reply in comment.replies"  comment="reply"></my-comment-directive>
    </div>
  </div>

因此，在看到您的数据结构后，我发现您需要进行更改。您希望迭代评论，而不是用户。

像这样的东西

var commentsArray = [{text: 'comment 1', author: user1, replies: []}]

回复只是一个相同类型的格式注释的数组。

AngularJs如何在另一个div中插入一个div？

1 个答案: