What is this?

Angular Editables is a project thatis designed to fill a particular niche when working with AngularJS projects. Specifically, it's all about turning html elements into editable inputs that are easy to bind to. This is similar in concept to the x-editables project, with a few big exceptions:

• Editables does not care what element you want to make editabled.
• Editables is designed to work exclusively with AngularJS.
• Editabled is tightly integrated with Bootstrap. (This will change in the future.)
• Editables uses contenteditable under the hood.

As with most libraries of this nature, Editables has been designed to scratch my particular itch, and isn't necessarily the best general design possible. Still, it's here in case you find it useful. If you'd like to improve the project, fix an issue you've found, or otherwise make changes, feel free to fork it.

Simple Example

Click on the editable to edit it. As you can see, it works exactly as you'd expect. If you look at the source, you'll notice that the contents of the element are used as placeholder text, when the editable's value is empty. While this might be a little bit confusing, it means that you can have placeholder text, as well as an initial value, by binding to a model that's already populated.

Even though this is the most basic case, it's already as usable as your normal input element.

Two-way binding

Editables are designed to work just like input elements, when it comes to binding them to models. Instead of using ng-model="foo", however, you simply pass the value to the editable directive: editable="foo. This works just like you'd expect.

Play with both the input field, and the editable, to get a good feel for how the binding works.

Single-line

By default, editables work like normal content editables, and support multi-line entry. However, sometimes all you want is a single line entry. Editabled supports that too, by specifying type="line". See for yourself.

Toolbars

Editables also supports toolbars to make specific types of editing easier. As you can see, we have a basic WYSIWYG editor implemented. All you need to do is specify toolbar="text-edit".

The toolbar functionality is central to my concept to Editables. As such, most of my future development will be focused on adding user-defined toolbars, and expanding the list of built-in toolbars. (Currently, the only toolbar is the 'text-edit'.)

Confirm

While the two-way binding is very useful, it's not desirable in some situations. For those, you want to specify confirm="true", which will cause the editable to only submit when the save method has been called. This isn't directly useful, without also including toolbar (no value required).

With both included, Editables renders a toolbar with Save and Cancel buttons. When you hit Save, the value of the editable is saved to the model, and the `save` message is emitted up the scope tree. If you instead hit Cancel, the field is reverted, and the 'cancel' message is emitted up the scope tree. ( Note: The name property of the element is passed as the only argument to these messages. )

Here's the WYSIWYG demo again, with confirm:

This also demonstrates support for a custom save callback. Simply specify the onsave parameter, setting it to an AngularJS expression. The name parameter is passed in, and can be referenced by the expression.