Question

我正在尝试使用angularjs找到内联编辑的最佳方法。就我而言，它是一种带有“编辑”按钮的数据网格。所以它在ng-repeat中。

我看到人们在同一行中同时拥有实际数据和编辑输入，编辑输入被隐藏，并在点击编辑按钮时显示。

但这似乎不对。在我看来，这是一个无用的DOM。

所以我觉得做这样的事情会更好。你点击编辑按钮，它将有一个指令，它将1）隐藏<td>数据2）找到按钮的父级，应该是<tr>，并注入一个模板它3）在保存时删除那些编辑<td>并再次显示数据<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>');

但是它会不会绑定甚至解析{{}}吗？我必须使用什么方法而不是jquery的追加？

关于指令的文件说明了这个

template element - 声明指令的元素。在元素和子元素上进行模板转换是安全的仅元素。

所以我不能在element.parent（）

上使用模板转换

如果我在<tr>上做出指令会有所帮助，即使我做了，我也会转换整个<tr>，这意味着我丢失了原来的模板而且我已经有另一个指令或什么东西会把它变回原来的状态..不是吗？

修改

因为这个问题看起来很流行..首先，我最初担心每次重复重复迭代渲染额外的元素是没有根据的，因为1）你可以使用ng-if，这意味着它不会被渲染，直到条件是真的2）你可以按照我的意图添加一个模板，然后只使用$compile它就可以正常工作，它绝对不会“昂贵”，因为你只是为了一个元素。有许多方法可以解决这个问题，但是ng-if是最简单的，如果supermasher的方式不适合你，那就是。

Answer 1

注入一个新模板是一种非常昂贵的处理方式，特别是如果你的内联编辑器实例很多的话。

有很多方法可以做到这一点，但最干净（也是最简单）的方法是使用相同的元素来编辑和显示数据，并使用指令切换它的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/。

Answer 2

您好，我知道已经有一个已接受的答案，但我偶然发现了这个

http://vitalets.github.io/angular-xeditable/

最近，我认为这是一个非常体面的项目，通常可以处理可编辑的控件。

希望它有所帮助。

Answer 3

如果您使用新的ng-if指令来“隐藏”那些编辑输入和内容，那么就把它扔掉那里，“很多无用的DOM”不再是一个问题，因为ng-如果根本不渲染html。

Angular.js内联编辑

修改

3 个答案: