我有一个表行，我可以使用一些 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 进行一些数据绑定(bind)，如下所示:
<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 无法访问这个动态加载的元素，因为它在加载时不可用。
实现这一目标的最佳方法是什么？
最佳答案
实现这一目标的最佳方法是忘记您所知道的有关 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> 一样简单。它会自动出现。
这是一个 fiddle :http://jsfiddle.net/VEbsU/1/显示完整示例
关于jquery - 使用 jQuery 访问动态添加的 DOM 元素内的 Angular 数据绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19501622/