$編譯動態添加行以使用ngClick - AngularJS

我試圖通過單擊「加號」圖標動態地添加一些行到表中。它的作品，但在這些行中，我有一個「垃圾」圖標，允許我刪除該行。

delete函數可以很好地處理靜態行，但不會被動態添加的行調用。我想我需要編譯行，但無法找到如何使用它。

這裏是靜態行

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

這是我在我的主指令添加一個新行：

$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-點擊包含在新行中沒有任何影響，這是爲什麼我認爲我應該使用$ compile，但是如何以及在哪裏？

來源

2015-10-29 JonathanG

你就錯了......你應該差不多了永遠不要在你的控制器中操縱DOM。在你的控制器中使用一系列行，並使用ng-repeat來渲染它們。然後，只需操作數組，並讓範圍更新處理所有工作來渲染它。 – wmil

ng-repeat會爲你做這個 –

不要操縱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>

來源

2015-10-29 14:34:30 tymeJV

感謝隊友，我對角度非常陌生，所以我知道我有點麻煩...... ^^ – JonathanG

$編譯動態添加行以使用ngClick - AngularJS

回答

相關問題