Question

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

我设法通过将model: 'accessor'更改为model: '&'来取得一些进展，但是当我按Enter键时，文本值保持不变。关于指令定义对象的scope参数的AngularJS documentation对我来说是完全不可穿透的。

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

你应该使用'='绑定（双向），然后直接绑定到范围的'model'属性。

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

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

AngularJS内联编辑1.0.3

2 个答案: