Реализация inline Editor

http://javascript.ru/forum/angular/41269-realizaciya-inlineedit-i-rabota-s-direktivami.html

by TemaMix

HTML

<div ng-app="directive">

    <div contentEditable="true" ng-model="content">Измените текст</div>
    <div contentEditable="true" ng-model="content">Измените текст</div>
    <pre>model = {{content.value}}</pre>
  </div>

CSS

div[contentEditable] {
        cursor: pointer;
        background-color: #D0D0D0;
        margin-bottom: 1em;
        padding: 1em;
      }

JavaScript

angular.module('directive', []).directive('contenteditable', function() {
      return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
          // вид -> модель
          elm.bind('blur', function() {
            scope.$apply(function() {
              ctrl.$setViewValue(elm.html());
            });
          });
     
          // модель -> вид
          ctrl.$render = function(value) {
            elm.html(value);
          };
     
          // загрузка начального значения из DOM
          ctrl.$setViewValue(elm.html());
        }
      };
    });