使用带有 contenteditable 标签的 ngModel答案

【问题标题】：Use ngModel with contenteditable tag使用带有 contenteditable 标签的 ngModel
【发布时间】：2014-10-11 08:57:18
【问题描述】：

我想用带有contenteditable=true 的标签来紧缩模型

但是，看起来 ngModel 只适用于 input、textarea 或 select：

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

最好的方法是什么？我的目标是格式化（样式）一些可编辑的输入/文本区域，但绑定到模型。

【问题讨论】：

ngModel 仅适用于输入、文本区域和开箱即用的选择。但它可以扩展并与其他内容一起使用，例如内容可编辑、文件输入、自定义单选按钮而无需实际输入

标签： javascript css html angularjs

【解决方案1】：

在野外已经有一些这样的例子，阅读和学习。每一个都有一些优点/缺点。

提示：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>

【讨论】：

【解决方案2】：

Span 不是 ng-model 使用这个

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <code contenteditable="true" ng-click="setModel()">
      <span style="color: red;">
        Hello
      </span>
      <span style="color: blue;" >{{name}}
      </span>
    </code>
  </body>

</html>

var app = angular.module('plunker', []);

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

  }
});

【讨论】：

不完全是我想要的：（1）我不想在绑定之前点击（但它的小问题），（2）它没有双向绑定（这里是大问题）跨度>