Install ng-inline-edit via Bower:
bower install ng-inline-edit --production
Include main files:
<link rel="stylesheet" href="bower_components/ng-inline-edit/dist/ng-inline-edit.min.css">
<script src="bower_components/ng-inline-edit/dist/ng-inline-edit.min.js"></script>
Include angularInlineEdit
module as a dependency into your app:
angular
.module('yourApp', [
'angularInlineEdit'
]);
Pass your model to inline-edit
attribute on your HTML element and provide a callback function to listen changes:
<span inline-edit="yourModel"></span>
<!-- with optional attributes:
inline-edit-callback="yourListener(newValue)"
inline-edit-validation="yourValidator(enteredValue)"
inline-edit-placeholder="Type a value..."
inline-edit-btn-edit="Click to edit"
inline-edit-btn-save="Save me"
inline-edit-btn-cancel="Nevermind"
inline-edit-on-blur="cancel" // 'cancel' or 'save'
inline-edit-on-click
inline-edit-textarea // uses <textarea> instead <input> & disables Enter key submit
-->
See the instructions at ng-pack.