我正在尝试找到使用 angularjs 进行内联编辑的最佳方法。就我而言，它是一种带有“编辑”按钮的数据网格。所以它在 ng-repeat 内部。
我看到人们所做的是将实际数据和编辑输入放在同一行中，编辑输入被隐藏并在单击编辑按钮时显示。
但是好像不太对劲。在我看来，这是很多无用的 DOM。
所以我想我会更好地做这样的事情。您单击编辑按钮，该按钮将有一个指令，该指令将 1) 隐藏 <td>使用数据 2)找到按钮的父级，应该是 <tr> ，然后将模板注入(inject)其中 3) 保存时删除那些编辑 <td> s 并显示数据 <td>又来了。
所以我开始制定指令，里面有 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>');
但是它不会绑定(bind)甚至解析 {{}} 吗？我必须使用什么方法来代替jquery的append？
关于指令的文档这样说
template element - The element where the directive has been declared. It is safe to do template transformation on the element and child elements only.
所以我不能在 element.parent() 上使用模板转换
如果我在 <tr> 上发出指令会有帮助吗？即使我这样做了，我也会改变我的整个<tr> ，这意味着我丢失了原始模板，并且我必须有另一个指令或其他东西可以将其转换回原始状态..不是吗？
编辑
因为这个问题似乎很受欢迎..首先，我最初担心每次 ng-repeat 迭代渲染额外的元素是没有根据的，因为 1) 你可以使用 ng-if，这意味着它根本不会被渲染，直到条件满足true 2)您可以按照我的意图附加一个模板，然后只需使用 $compile它会工作得很好，它绝对不会“昂贵”，因为你只是为了一个元素而这样做。有很多方法可以解决这个问题，但是 ng-if 是最简单的，如果 supermasher 的方法不适合你的话。
最佳答案
注入(inject)新模板是一种相当昂贵的方法，特别是如果您有很多内联编辑器实例。
有很多方法可以做到这一点，但最干净(也是最简单)的方法是使用相同的元素来编辑和显示数据，然后使用指令简单地切换它的 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()
}
});
};
});
查看这个 fiddle 以获得完整的工作示例:http://jsfiddle.net/3EaY8/ .
关于jquery - Angular.js 内联编辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15785100/