AngularJS - ng-model fails on contenteditable <span>

javascript angularjs html contenteditable angularjs-ng-model

ng-bind! Use ng-bind for one-way binding in 'span'.

Please refer here for an example: https://docs.angularjs.org/api/ng/directive/ngBind

So your line would be:<span contenteditable="true" ng-bind="chunk.value"></span>

Hope this help

javascript angularjs html contenteditable angularjs-ng-model

To make ng-model work with contenteditable <span> elements, use a custom directive:

app.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);        }      }    };}]);

Usage:

<span contenteditable ng-model="userContent">Change me!</span><p>{{userContent}}</p>

For more infomation, see

The DEMO

Show code snippet

angular.module('customControl', ['ngSanitize']).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);        }      }    };  }]);

[contenteditable] {  border: 1px solid black;  background-color: white;  min-height: 20px;}

<script src="//unpkg.com/angular/angular.js"></script><script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script><body ng-app="customControl"> <span contenteditable ng-model="userContent">Change me!</span> <hr> Content={{userContent}}</body>

Expand snippet