訪問角的數據動態地添加DOM元素使用jQuery

Question

我有一個錶行，我可以動態地添加到使用一些jQuery的，像這樣一個現有的表：

$("#add-item").click(function(){ 
    var itemRow = "<tr><td><span contenteditable='true'><a href='#'>Edit me<a/></span></td></tr>"; 
    $("#job-table").hide(0).append(itemRow).fadeIn(500); 
}); 

我也有一些數據綁定我可以做的角度，像這樣：

<div> 
    <input type="text" ng-model="data.message"> 
    <h1>{{data.message}}</h1> 
</div> 

我想是有這樣的事情：

$("#add-item").click(function(){ 
    var itemRow = "<tr><td><span contenteditable='true'><a href='http://something.com/{{content.url}}'>content.url<a/></span></td></tr>"; 
    $("#job-table").hide(0).append(itemRow).fadeIn(500); 
}); 

問題是角度無法訪問這個動態加載的元素，因爲它在加載時不可用。

什麼是最好的方法來實現這一目標？

Answer 1

實現這一目標的最好方法是忘記你對jQuery的一切瞭解。將「items」數組放入您的示波器並使用ng-repeat。

僞代碼：

<tr ng-repeat = "item in items"> 
<td><span contenteditable='true'><a ng-href='http://something.com/{{item.url}}'>item.url<a/></span></td> 
</tr> 

現在使用ng-click觸發增加一個項目的項目數組，你是好去。不需要jQuery。它甚至可以像<button ng-click="items.push({url:'what'})">add</button>一樣簡單，它會自動出現。

這裏有一個小提琴：http://jsfiddle.net/VEbsU/1/展示一個完整的例子