Angular.js内联编辑

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>,这意味着我失去了原来的模板,我必须有另一个指令或某些东西,将它转换回原始状态..不是吗？

编辑

因为这个问题看起来很流行..首先,我最初担心每次ng重复迭代渲染额外的元素是没有根据的,因为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/.