Question

我是AngularJS的新手，我目前正在努力弄清楚如何最好地实现此功能：

我正在寻找一种方式，我有<span editable>I am a text</span>的内容，当用户点击它时，它变得可编辑（例如。<input type="text">），直到元素失去焦点，哪一点它应该用新值翻转回原来的<span editable>...</span>。此外，这可能不是静态文本，而是绑定到模型。

我认为这对指令应该是可行的，但是我已经找到了关于这样一个指令实际如何工作的路线。

app.directive('editable', function() {
    return function(scope, element, attrs) {
        element.bind('click', function () {
            // something.
        });
    }
})

有人能为我提供指导或解决方案吗？

提前致谢，
- 曼尼

Answer 1

我是如何创建一个可以应用于任何html元素的指令。它隐藏了标准元素，并在您单击时显示文本字段。然后当你离开田地时，它会将它改回原始元素。

更多详情here

这里是伴侣小提琴

http://jsfiddle.net/cmyworld/6gMXL/

您可以像

一样使用它

    <h1>
      <editable model="heading" on-delete="" defaultval="Default val">
    </h1>

AngularJS中绑定视图之间的动态切换

1 个答案: