Question

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.

Answer 1

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/