AngularJS: Добавить прослушиватель событий после .post()

Question

Я пытаюсь изучить разработку, так что извините, если я немного не проинформирован. Я попытался найти здесь решения. Я должен написать комментарий и ответить. Я использую эту функцию для добавления комментариев к моему представлению.

$scope.insertComment = function(){ 

    var new_comment_id = $scope.comments[$scope.comments.length - 1].commentID +1; 
    var input = { 
     "commentID" : new_comment_id, 
     "userID": user.user_id, 
     "name": user.user_name, 
     "avatar_url": user.avatar, 
     "says": $scope.new_comment, 
     "likes": 0, 
     "like_status": false, 
     "replies": [] 
    }; 
    //Pushes changes to the global comment object 
    $scope.comments.push(input); 
    $scope.new_comment = ''; 
} 

У каждого комментария есть вариант ответа со следующим событием, которое отображает форму для добавления ответа к комментарию.

$(".no-url").click(function(){ 
    console.log('test2'); 
    $(this).parent().children('.reply-form').addClass('active'); 
}); 

Моя проблема заключается в том, что, когда я добавить новый комментарий, он не имеет такой слушателя событий, связанный с ним. Как это решить?

Answer 1

$(SELECTOR) будет выбирать только те элементы, которые присутствуют в DOM.

Event-Delegation могут быть использованы

$(PARENT_SELECTOR).on('click', '.no-url', function() { 
    $(this).parent().children('.reply-form').addClass('active'); 
}); 

Но лучше и рекомендуемым решением будет использовать ng-click директиву.

Answer 2

Использование directive с jQLite

HTML:

<div comment-click> 
    //your comment html will goes here. 
</div> 

JS:

app.directive("commentClick",function(){ 

    return { 
     link : function(scope,ele,attr){ 

      ele.on('click',function(){ 

       //put here your commnet scropt 

      }) 
     } 
    } 
}) 

Добавить этот comment-click атрибут вашего когда-либо добавленного нового DOME элемента, на который вы хотите связать событие щелчка

Answer 3

Здесь упрощен код, как сделать это только с angularjs без привлечения JQuery

<div class="comment" ng-repeat="comment in comments track by $index> 
    <p>{{comment.text}}</p> 
    <button ng-click="comment.reply = true">reply to comment</button> 
    <form ng-if="comment.reply"> 
    <textarea ng-model="reply"></textarea> 
    <button ng-click="submitReply()">submit reply</button> 
    </form> 
</div>