Saturday, March 15, 2014

Edit-in-place input field implementation with AngularJS

While working on a little side project with Rails and AngularJS, I needed an edit-in-place (or click-to-edit) functionality for text input fields.

Edit-in-place means that the text input field will be toggled between edit-mode and preview-mode, and when in edit-mode - you can persist the change to the server and continue working without page refresh.

This approach is becoming common in reactive web-apps and SPAs, while The "save" button for the whole form is gradually disappearing.

My implementation provides a directive, an HTML template, a controller (in the directive) and a service. With this configuration your controllers remain untouched, since the directive's controller is injected with a generic service and uses it directly. The service uses Restangular to talk to my Rails back-end.

So here's the Gist:

Yes, this code still needs some refactoring..