Нет обнаружения AngularJS после дописывания DIV в JQuery

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

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

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

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