public/components/editable-field/editable-field.html

<button class="editable__edit-button" ng-click="editableController.setEditMode(true)">
    <ng-transclude class="editable__view-value" ng-class="{'editable__view-value--preserve-whitespace' : preserveWhitespace}"></ng-transclude>
</button>
<wf-editable-field-target></wf-editable-field-target>
<span class="editable__controls">
    <button class="editable__control editable__control--save" ng-click="commit()" title="Save changes">
        <i class="editable__control-icon editable__control-icon--save" wf-icon="check"></i>
    </button>
    <button class="editable__control editable__control--cancel" ng-click="cancel()" title="Cancel changes">
        <i class="editable__control-icon editable__control-icon--cancel" wf-icon="cross"></i>
    </button>
</span>
<div class="editable__error" ng-show="editableErrors.required">This field is required</div>
<div class="editable__error" ng-show="editableErrors.minlength">Minimum {{ validateMinlength }} characters required</div>
<div class="editable__error" ng-show="editableErrors.maxlength">Maximum {{ validateMaxlength }} characters permitted</div>
<div class="editable__error" ng-show="editableErrors.notSaved">Changes unsaved</div>