I found an excellent fiddle showing an inline edit directive in AngularJS 0.10. Unfortunately, the code doesn't work in the post-1.0 releases. Does anyone have an example of similar functionality in a recent Angular release?
I managed to make some progress by changing model: 'accessor' to model: '&', but when I press enter, the text value is unchanged. The AngularJS documentation about the scope parameter of a directive definition object is completely impenetrable to me.
If you want a simple bi-directional binding use model: '=' instead of model: '&'
Directive:
app.directive('inlineEdit', function() {
return {
restrict: 'E',
templateUrl: 'componentTpl.html',
scope: {
model: '='
}
};
});
Template:
<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/
= at one point as well. Thanks heaps!You should use '=' binding (bi-directional) and then directly bind to 'model' property of scope.
Here is corrected sample: http://plnkr.co/edit/tjTsNiQ7t0xMWkCEAzwo?p=preview
(its a same solution as @bmleite gave)
