使用jQuery访问动态添加的DOM元素内的Angular数据绑定

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);
});

我也有一些数据绑定,我可以用Angular这样做:

<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);
});

问题是angular无法访问此动态加载的元素,因为它在加载时不可用.

实现这一目标的最佳方法是什么？

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用来触发将一个项添加到items数组中,你就可以了.不需要jQuery.它甚至可以如此简单<button ng-click="items.push({url:'what'})">add</button>,它会自动出现.

这是一个小提琴:http://jsfiddle.net/VEbsU/1/显示了一个完整的例子