1

我有一个表格行，我可以使用一些 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 无法访问这个动态加载的元素，因为它在加载时不可用。

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

4

1 回答 1

5

实现这一点的最好方法是忘记你所知道的关于 jQuery 的一切。在您的范围内放置一个“项目”数组并使用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/显示了一个完整的例子

于 2013-10-21T19:10:11.027 回答