angular-content-editable

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

DEMO

Getting started:

Download the package using npm:

npm install angular-content-editable

Download the package using bower:

bower install angular-content-editable

or directly from github.

Add the script to your page dependencies:

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

And finally add content-editable to your module dependencies:

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

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

<a href="!#" ng-model="myModel" 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

---

Customizations:

You can use the contentEditableProvider to set the default settings for the directive, but you can always pass directly to the directive as attributes to override the defaults for that element.

angular.module('app')
  .config(function(contentEditableProvider) {

    contentEditableProvider.configure({
      singleLine: true // single line for all elements
    })

  })

---

Example basic:

Simply adding the directive makes the element fully editable.

<h2 ng-model="myModel" 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" ng-model="myModel" content-editable>Change me anyway.</div>

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

<span focus-select="true" ng-model="myModel" 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" ng-model="myModel" content-editable>Change me!</span>

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

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

  })

Development:

If you want to fork you copy of the project and modify it:

npm install angular-content-editable // install module files
npm install // install dependencies

Than a Gruntfile is ready with this actions:

grunt   // build the package
grunt watch   // watch to /src folder and rebuild the package