我正在尝试用angularjs找到内联编辑的最佳方法。在我的例子中，它是一种带有"编辑"按钮的数据网格。它在ng-repeat中
我所看到的人们所做的是将实际数据和编辑输入放在同一行，编辑输入被隐藏并在单击编辑按钮时显示。
但这似乎不对。在我看来，这是一大堆无用的DOM。
所以我想我最好这样做。你点击编辑按钮，它将有一个指令，这将1)隐藏<td>与数据2)找到按钮的父，这应该是<tr>，并注入一个模板与它3)保存删除那些编辑<td> s，并再次显示数据<td> s。
所以我开始制作指令，里面有element.click()函数，
// found the parent
var parent = element.closest('tr');
// found all the data tds
var tds = parent.find('td');
// hidden them
tds.hide();
现在问题来了，接下来我想做这样的事情
// append input with editing tds into parent
parent.append('<td><input type="text" ng-model="entry.name" /> {{entry.name}} </td>');
但是它不会绑定甚至解析{{}}，不是吗?我要用什么方法来代替jquery的append?
关于指令的文档说这个
template element——声明了指令的元素。对元素和子元素进行模板转换是安全的
元素。
所以我不能在元素上使用模板转换。parent()
如果我在<tr>上制作指令会有帮助吗?即使我这样做了，我也会转换我的整个<tr>，这意味着我失去了原始模板，我必须有另一个指令或其他东西将其转换回原始状态。不是我?
编辑
既然这个问题似乎很受欢迎…首先，我最初担心在每次ng-repeat迭代中渲染额外的元素是没有根据的，因为1)你可以使用ng-if，这意味着它根本不会被渲染，直到条件为真2)你可以像我想的那样附加一个模板，然后只使用$compile，它就会工作得很好，它绝对不会"昂贵"，因为你只是为一个元素做它。有很多很多方法可以做到这一点，但ng-if是最简单的，如果supermasher的方法不适合你，那就是。
注入一个新的模板是一种非常昂贵的方式，特别是当你有很多内联编辑器的实例时。
有很多方法可以做到这一点，但最干净(也是最简单)的是使用相同的元素来编辑和显示数据，并简单地使用指令切换它的CSS来改变它在两种状态下的显示方式，如下所示:myApp.directive('inlineEdit', function () {
return function (scope, element, attrs) {
element.bind('click', function () {
if (element.hasClass('inactive')) {
element.removeClass('inactive');
} else {
element.addClass('inactive');
$(element).blur()
}
});
};
});
查看此提琴以获得完整的工作示例:http://jsfiddle.net/3EaY8/.
大家好，我知道已经有一个公认的答案了，但是我偶然发现了这个
http://vitalets.github.io/angular-xeditable/最近，我相信它是一个非常体面的项目，处理一般的可编辑控件。
希望它能帮助到一些人。
只是把这个扔在那里，如果你使用新的ng-if指令来"隐藏"那些编辑输入和东西，"很多无用的DOM"不再是一个问题，因为ng-if根本不渲染html。