angular-content-editable

angular-content-editable

angular directive for modify in real time any html tag you want

Directive attributes:

• single-line: if set to true makes the enter key save and blur
• focus-select: if set to true when element goes to focus, all the text inside will be selected
• render-html: if set to true allow the text passed as input to be compiled and rendered
• edit-callback: a callback that is called wherever the model value is changed

Note that, edit-callback has two arguments:

• text: the new text inside the element
• elem: the element that has been modified

Example basic:

Simply adding the directive makes the element fully editable.

<h2 content-editable>Change me if you like.</h2>

With single-line attribute, when enter key is pressed the editing will finish (no line-breaks):

<div single-line="true" content-editable>Change me anyway.</div>

With focus-select all text content will be selected on element click or focus.

<span focus-select="true" content-editable>Change me!</span>

With edit-callback attribute if you passed a valid function it will run every time the model value is changed.

<span focus-select="true" edit-callback="myFunc" content-editable>Change me!</span>

angular.module('myApp')
  .controller(function($scope) {

    $scope.myFunc = function(text, elem) {
      // do something magic
    }

  })