Angular - editable

by douglasloyo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="homeController">
    <span>{{hello}}</span>
    <div style="width:100px; height:100px; border:1px solid gray" contenteditable ng-model="text" ></div>
    <p>{{text}}</p>
</div>
</div>

JavaScript

/* Application */
var myApp = angular.module('myApp', []);

myApp.controller('homeController', function ($scope) {
	$scope.hello = "Hi!";
    $scope.text="ddd";
});

myApp.directive("contenteditable", function() {
  return {
    restrict: "A",
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {

      function read() {
        ngModel.$setViewValue(element.html());
      }

      ngModel.$render = function() {
        element.html(ngModel.$viewValue || "");
      };

      element.bind("blur keyup change", function() {
        scope.$apply(read);
      });
    }
  };
});