在jquery中追加div之后没有检测到AngularJS

Question

$('button.op_comm_now').one('click', function() {
  $(this).parent().before('<div class="comment_box_all" ng-controller="votesController"></div>');
}).click(function() {
  var panel = $(this).closest('.area_comm_tex');
  var commentBox = panel.prev('.comment_box_all');
  var content = document.createElement("span");
  content.innerHTML = panel.find('.text_area').val().replace(/(\n|\r|\r\n)/g, '<br>');
  commentBox.append('<div class="comment_user"><div ng-repeat="vote in votes"> <div class="comment_note_11" ><a ng-click="incrementLikes(vote)" class="vote_comment_11"></a><span class="num_vote_comm_11">{{vote.Likes}}</span><a ng-click="decrementLikes(vote)" class="vote_dis_like_comm_un11"></a></div></div><div class="content_text_user_ans"></div></div>');
  commentBox.find('.content_text_user_ans').last().html(content);
});

var myApp = angular.module("myApp", []);
myApp.controller("votesController", function($scope) {
  var votes = [{
    Likes: "0"
  }, ];
  $scope.votes = votes;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" ng-app="myApp">
  <div class="area_comm_tex">
    <textarea class="text_area" placeholder="Add comment"></textarea>
    <button class="op_comm_now">Add text</button>
  </div>
</div>

嘿伙计们， 我没有什么问题，因为在这种情况下AngularJS不是“检测”。尝试点击button并显示{{vote.Likes}}，但应该显示为“0”，就像我$scope.votes中一样。 谢谢你的帮助

Answer 1

我建议你只使用Angular。 E.g。

＆＃13;

＆＃13;

var myApp = angular.module("myApp", []);
myApp.controller("votesController", ['$scope', function($scope, $timeout) {
  $scope.comments = [{
      comment: "blah",
      likes: 1
    },
    {
      comment: "blah2",
      likes: 0
    }
  ];
  $scope.newComment = {
    comment: "",
    likes: 0
  };
  $scope.createComment = function() {
    if ($scope.newComment.comment != "") {
      $scope.comments.push({
        comment: $scope.newComment.comment,
        likes: $scope.newComment.likes
      });
    }
  };
  $scope.incrementLikes = function(comment, idx) {
    comment.likes++;
    $scope.comments[idx] = comment;
  };
  $scope.decrementLikes = function(comment, idx) {
    comment.likes--;
    $scope.comments[idx] = comment;
  };
}]);

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div class="container" ng-app="myApp">
  <div ng-controller="votesController">
    <div ng-repeat="comment in comments">
      <div class="comment_box_all">
        <div class="comment_user">
          <div class="comment_note">
            <a ng-click="incrementLikes(comment, $index)" class="vote_comment">Like</a>
            <span class="num_vote_comm_11"> | {{comment.likes}} | </span>
            <a ng-click="decrementLikes(comment, $index)" class="vote_dis_like_comm">Unlike</a>
          </div>
          <div class="content_text_user_ans"><span>{{comment.comment}}</span></div>
        </div>
      </div>
    </div>
    <div class="area_comm_tex">
      <textarea class="text_area" ng-model="newComment.comment" placeholder="Add comment"></textarea>
      <button class="op_comm_now" ng-click="createComment()">Add text</button>
    </div>
    <pre>{{comments}}</pre>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;