Content editable with ng-model.

content editable div with ng-model in directive and ng-bind-html

by Rishi Kumar

HTML

<div ng-app="Demo" ng-controller="main">
   
    <div contenteditable="true" ng-model="contentValue" ng-bind-html="div"></div>
   
   
   <div>{{contentValue}}</div>
</div>

CSS

/* [contenteditable] {
    height: 20px;
    border: 1px solid gray;
} */

JavaScript

angular.module("Demo", [])
.controller("main", function($scope,$sce) {
    $scope.contentValue = "";
    $scope.div = $sce.trustAsHtml("<div>This is the div value</div><div>This is second div content</div>")
}).
directive('contenteditable', ['$sce', function($sce) {
  return {
    restrict: 'A', // only activate on element attribute
    require: '?ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModel) {
      if (!ngModel) return; // do nothing if no ng-model

      // Specify how UI should be updated
      ngModel.$render = function() {
        element.html($sce.getTrustedHtml(ngModel.$viewValue || ''));
      };

      // Listen for change events to enable binding
      element.on('blur keyup change', function() {
        scope.$evalAsync(read);
      });
      read(); // initialize

      // Write data to the model
      function read() {
        var html = element.html();
        // When we clear the content editable the browser leaves a <br> behind
        // If strip-br attribute is provided then we strip this out
        if ( attrs.stripBr && html == '<br>' ) {
          html = '';
        }
        ngModel.$setViewValue(html);
      }
    }
  };
}]);