angular-content-editable

angular-content-editable

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

Getting started:

Download the package using npm:

npm install angular-content-editable

or directly from github.

Add the script to your page dependencies:

<script type="text/javascript" src="content-editable.min.js"></script>

And finally add content-editable to your module dependencies:

angular.module('app', ['content-editable'])

and you are ready to go, add the directive to any element you want:

<a href="!#" content-editable>edit my text</a>

---

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
    }

  })