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

我是AngularJS的新手，目前正试图找出如何最好地实现此功能：

我正在寻找一种方法，在这种方法中，我有一些类似于

我是一个文本
，当用户单击它时，它将变得可编辑（例如
），直到元素失去焦点，此时它应该使用新值翻转回其原始
…
。此外，这可能不是静态文本，而是绑定到模型

我认为这在指令中应该是可行的，但我遇到了一个障碍，即这样一个指令实际上是如何工作的

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

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

提前感谢，

-Manny
我这样做是为了创建一个可以应用于任何html元素的指令。它隐藏标准元素，并在单击时显示文本字段。然后，当您离开该字段时，它会将其更改回原始元素

更多细节

这是伴奏小提琴


你可以像这样使用它

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

这可能会帮助你成为一名绅士和学者，钱德尔马尼。这似乎涵盖了我一直在寻找的东西。如果你把它作为一个答案添加到下面，我可以把它标记为一个解决方案，这样你就得到了荣誉、名声和荣耀：）