An Angular directive to easily make elements editable
demo here
It's pretty straight forward, like any angular directive...
<g-editable ng-model="myModel">
<span>{{myModel}}</span>
</g-editable>As you can see it requires a ng-model to have some value to work with.
When the user clicks on it, it transforms into a regular bootstrap input.form-control.
Obviously, the input is customizable so the directive supports an attribute named input-options, which requires a valid object
with properties to place on the input, see:
<g-editable
ng-model="greeting"
input-options="{'name': 'greeting', 'class': 'my-input', 'placeholder': 'Hello world', 'required': true}">
<span>{{greeting}}</span>
</g-editable>The class property is automatically prefixed with form-control from bootstrap, (if you don't like that feel free to change
your downloaded copy), and the placeholder property isn't normally placed as placeholder="value", instead, it's used
to give the value back if the user left the field blank. The rest is property="value" all the way.
You can watch for changes using the regular $scope.$watch() method from angular.
It also comes, with a little optional css file just to indicate that the element is clickable, but you should add some nice visuals and effects ;)