javascript - 将 ngModel 与 contenteditable 标签一起使用

Question

我想收紧带有 contenteditable=true

标签的模型

但是，看起来 ngModel 只适用于输入、文本区域或选择:

https://docs.angularjs.org/api/ng/directive/ngModel

因此下面的代码不起作用

<code contenteditable="true">
  <span style="color: red;">
    Hello
  </span>
  <span style="color: blue;" ng-model="name">
  </span>
</code>

和

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

http://plnkr.co/edit/jLJCtcoZQMfhp80LpGfp?p=preview

执行此操作的最佳方法是什么？我的目标是格式化(样式化)一些可编辑的输入/文本区域，但绑定(bind)到模型。

Answer 1

在野外已经有一些这样的例子，阅读和学习。每一项都各有利弊。

• > https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
• > http://bit.ly/1o4Kh2c
• > http://textangular.com/
• > https://github.com/angular/angular.js/issues/528
• > https://github.com/akatov/angular-contenteditable

---

提示:Show and Edit Style Element

body style {
	display: block;
	background: #333;
	color: white;
	font: 13px/1.8 Monaco, Mono-Space;
	padding: 20px;
	white-space: pre;
}

<style scoped contenteditable>body { 
  background: green; 
}</style>