angularjs - AngularJS 1.0.3 中的内联编辑

Question

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

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

Answer 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/

Answer 2

您应该使用“=”绑定（双向），然后直接绑定到范围的“模型”属性。

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

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