AngularJS 1.0.3 中的内联编辑答案

【问题标题】：AngularJS inline edit in 1.0.3AngularJS 1.0.3 中的内联编辑
【发布时间】：2013-01-14 16:28:36
【问题描述】：

我在 AngularJS 0.10 中发现了一个 excellent fiddle 显示内联编辑指令。不幸的是，该代码在 1.0 之后的版本中不起作用。有没有人在最近的 Angular 版本中有类似功能的示例？

我设法通过将model: 'accessor' 更改为model: '&' 取得了一些进展，但是当我按下回车键时，文本值没有改变。关于指令定义对象的scope 参数的AngularJS documentation 对我来说完全无法理解。

【问题讨论】：

当然，我一发这个就找到solution。
这里有一个很好的答案，关于在隔离范围内绑定数据的不同方法stackoverflow.com/a/13033249/527968

标签： angularjs

【解决方案1】：

如果您想要一个简单的双向绑定，请使用model: '=' 而不是model: '&'

指令：

app.directive('inlineEdit', function() {
    return {
        restrict: 'E',           
        templateUrl: 'componentTpl.html',
        scope: {
            model: '=' 
        }
    };
});

模板：

<script type="text/ng-template" id="componentTpl.html">  
    <span ng-hide="editMode" ng-click="editMode=true;value=model">{{model}}</span>
    <input type="text" ng-model="value" ng-show="editMode" ng-model-instant ng-enter="editMode=false" ng-change="model=value"/>
</script>

jsFiddler：http://jsfiddle.net/XuhzP/147/

【讨论】：

我可以发誓我曾经尝试过=。谢谢大家！

【解决方案2】：

您应该使用 '=' 绑定（双向），然后直接绑定到作用域的 'model' 属性。

这里是更正示例：http://plnkr.co/edit/tjTsNiQ7t0xMWkCEAzwo?p=preview

（与@bmleite 给出的解决方案相同）

【讨论】：