AngularJS-ng-model在内容可编辑的< span>上失败 [英] AngularJS - ng-model fails on contenteditable <span>

问题描述

我正在学习AngularJS.我遇到了我无法解释的内容，也找不到任何(或解决方案)的解释.

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

我有一个简单的AngularJS应用，并且尝试将<span contenteditable="true">绑定到值，但是它不起作用. EG:

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>

如何使最后一个跨度使用2向绑定，以便编辑其值会更新chunk.value，反之亦然?

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

推荐答案

ng-bind ！使用ng-bind在"span"中进行单向绑定.

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

请在此处参考示例: https://docs.angularjs.org/api/ng/directive/ngBind

因此您的行将是: <span contenteditable="true" ng-bind="chunk.value"></span>

希望获得帮助

这篇关于AngularJS-ng-model在内容可编辑的< span>上失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！