Question

我想要使用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

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

Answer 1

Span not 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>

JS

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

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

  }
});

Answer 2

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

提示：Show and Edit Style Element

＆＃13;

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

＆＃13;

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

＆＃13;

使用带有contenteditable标记的ngModel

2 个答案: