javascript - 将 jquery 与从 Angular 动态创建的元素一起使用不起作用

Question

我尝试使用 jquery 来操作由 Angular 创建的元素，但我无法让它工作。我想知道是否有人可以帮助我。谢谢

这是 HTML

<div class="patients">
    <tbody ng-repeat="patient in patients">
        <tr>
            <td>{{patient.name}}</td>
            <td>{{patient.number}}</td>
            <td>{{patient.date}}</td>
            <td id="item-{{$index}}">{{patient.reminded}}</td>
            <div class="sendreminder">
                <td>
                    <a href="" class="btn btn-info btn-sm sendreminder" style=" background-color: #00e699; border-color:#00e699; " ng-click="post($index) " "$parent.selected = $index" id="button-{{$index}}">
                        <span class="glyphicon glyphicon-send"></span> Request Payment
                    </a>
                </td>
            </div>
            <td>
                <a href="" style="text-decoration:none; color:inherit; scale: 4" class="pe-7s-info">
                </a>
            </td>
        </tr>

    </tbody>
</div>

这是jquery

$(function() {
$('.patients').on('click', ".sendreminder",function(e){
         alert('worked');
    });

});

Answer 1

ng-repeat 每次检测到更改时都会重新创建 DOM(因此，所有附加事件都将消失)。因此，要在 ng-repeat 完成后重新附加事件，您可以这样做

<tbody ng-repeat="patient in patients" ng-init="$last && ngRepeatFinish()">

$last 如果是 ng-repeat 的最后一项，将被设置为 true

并在 Controller 中创建ngRepeatFinish()函数

$scope.ngRepeatFinish = function(){
    $('.sendreminder').click(function(e){
         alert('worked');
    });
}

您还可以为此制定自定义指令，这比这更好，但这足以提供快速解决方案。请参阅this具有自定义指令的解决方案