Question

我试图通过点击＆＃34; plus＆＃34;来动态地向表中添加一些行。图标。它有效但是，在这些行中我有一个＆＃34;垃圾＆＃34;允许我删除该行的图标。

删除功能适用于静态行，但动态添加的行不会调用它。我想我需要$编译行，但无法找到如何使用它。

以下是静态行

<tbody class="fields-to-edit">
<tr style="display: none">
    <td>trash</td>
    <td>field_name</td>
    <td>data</td>
</tr>
<tr ng-repeat="field in fields">
    <td class="doc-viewer-buttons">
        <a ng-click="deleteRow($event)"><i tooltip="Delete the row" tooltip-placement="right" class="fa fa-trash"></i></a>
    </td>
    <td contenteditableclass="doc-viewer-field">
        {{field}}
    </td>
    <td>
        <div class="doc-viewer-value" contenteditable ng-bind-html="typeof(formatted[field]) === 'undefined' ? hit[field] : formatted[field] | trustAsHtml"></div>
    </td>
</tr>

这是我在main指令中添加新行的方法：

$scope.addRow = function () {
  $('.fields-to-edit').append($('<tr><td class="doc-viewer-buttons"><a ng-click="deleteRow($event)"><i tooltip="Delete the row" tooltip-placement="right" class="fa fa-trash"></i></a></td><td contenteditable class="doc-viewer-field">FIELDNAME</td><td><div class="doc-viewer-value" contenteditable>CONTENT</div></td></tr>'));
};

$scope.deleteRow = function ($event) {
  angular.element(angular.element($event.currentTarget).parent()).parent().remove();
};

新行中包含的ng-click没有效果，这就是为什么我认为我应该使用$ compile，但是如何以及在哪里？

Answer 1

不要操纵DOM - 更改数据以添加到DOM。在您的情况下 - 只需附加到fields数组

$scope.addRow = function () {
    $scope.fields.push("Some new field");
}

然后deleteRow应该获取行索引，将其从数据数组中拼接出来：

$scope.deleteRow = function(index) {
    $scope.fields.splice(index, 1);
}

<a ng-click="deleteRow($index)"><i tooltip="Delete the row" tooltip-placement="right" class="fa fa-trash"></i></a>

$ compile动态添加行以使用ngClick - AngularJS

1 个答案: