在改变innerHTML之后分配Click事件

Question

使用AngularJS w / Meteor

基本上，我有一个ng-click事件，它调用一个克隆的函数并将其放在别处。我更改了一些innerHTML，以便有一个用于删除项目的“x”图标。我希望能够点击新的删除它。

所以，我知道设置ng-click属性不起作用。我被困在如何实现这一目标上。

我的模板addClass.html

<tr id="{{$index}}" ng-repeat="class in $ctrl.classes" ng-click="$ctrl.addThisClass($event)">
            <td><span class="badge pull-left">{{class.units}}</span>&nbsp; {{class.name}}</td>
            <td>{{class.number}}</td>
            <td>{{class.teacher}}<span class="glyphicon glyphicon-plus text-danger pull-right"></span></td>
</tr>

它调用的函数

addThisClass = function($event) {
    var clone, table, tableBody, tableRow, tableRowLength, cmpTableData, tableData, tableDataText, remove, alert, footer;
    clone = $event.currentTarget.cloneNode(true);
    table = document.getElementById('queuedClasses');
    tableBody = table.getElementsByTagName('tbody')[0];
    tableRow = tableBody.getElementsByTagName('tr');
    tableRowLength = tableBody.getElementsByTagName('tr').length;
    tableData = clone.getElementsByTagName('td');
    footer = document.getElementById("modalFooter");
    tableDataText = tableData[2].textContent;
    if (tableRowLength < 7) {
        for (var i = 0; i < tableRowLength; i++) {
            if (tableRow[i].getElementsByTagName('td')[1].textContent == tableData[1].textContent) {
                if (footer.getElementsByClassName('alert').length === 0) {
                    alert = document.createElement('div');
                    alert.className = 'alert alert-danger text-left';
                    alert.id = 'alertMessage';
                    alert.setAttribute('role', 'alert');
                    alert.appendChild(document.createTextNode('Sorry, you already added that class to the queue.'));
                    footer.insertBefore(alert, footer.childNodes[0]);
                    setTimeout(function() {
                        $("#alertMessage").fadeTo(500, 0).slideUp(500, function() {
                            $(this).remove();
                        });
                    }, 3000);
                }
                return;
            }
        }
        remove = '<span class="glyphicon glyphicon-remove text-danger pull-right" style="padding-top: 2px; !important;" title="Delete Class"></span>';
        tableData[2].innerHTML = tableDataText + remove;
        tableBody.appendChild(clone);
    } else {
        if (footer.getElementsByClassName('alert').length === 0) {
            alert = document.createElement('div');
            alert.className = 'alert alert-danger text-left';
            alert.id = 'alertMessage';
            alert.setAttribute('role', 'alert');
            alert.appendChild(document.createTextNode('You cannot have more than 7 classes queued.'));
            footer.insertBefore(alert, footer.childNodes[0]);
            setTimeout(function() {
                $("#alertMessage").fadeTo(500, 0).slideUp(500, function() {
                    $(this).remove();

                });
            }, 3000);
        }
    }
    /* Reset Filter */
    var input, filterTable, filterTR;
    input = document.getElementById("searchForClasses");
    input.value = '';
    filterTable = document.getElementById("tableClasses");
    filterTR = filterTable.getElementsByTagName("tr");
    for (i = 0; i < filterTR.length; i++) {
        filterTR[i].style.display = "";
    }
}