Search code examples
javascriptangularjshtmlcontenteditableangularjs-ng-model

AngularJS - ng-model fails on contenteditable <span>

I'm learning AngularJS. I've come across something I can't explain, nor can I find any explanation for (or solution).

I have a simple AngularJS app and I am attempting to bind a <span contenteditable="true"> to a value, but it doesn't work. EG:

<!-- Works as expected -->
<input data-ng-model="chunk.value"></input>

<!-- Shows value, but doesn't bind - changes not reflected in model -->
<span contenteditable="true">{{chunk.value}}</span>

<!-- This is empty -->
<span contenteditable="true" data-ng-model="chunk.value"></span>

How can I make the last span use 2-way binding, such that editing its value updates chunk.value and vice versa?

Solution

  • 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