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/显示一个完整的例子

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

1 个答案: