错误：uiCodemirror3 只能应用于 textarea 元素答案

【问题标题】：Error: uiCodemirror3 can only be applied to a textarea element错误：uiCodemirror3 只能应用于 textarea 元素
【发布时间】：2017-02-15 09:49:48
【问题描述】：

根据ui-codemirror的文档：

ui-codemirror 指令与 ng-model 配合得很好。

将监视 ng-model 以设置 CodeMirror 文档值（通过 setValue）。

ui-codemirror 指令存储并期望模型值是标准的 javascript 字符串。

但是，我的以下代码 (JSBin) 在控制台中返回错误 Error: uiCodemirror3 can only be applied to a textarea element。

<html ng-app="flapperNews">
<head>
  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="https://codemirror.net/lib/codemirror.js"></script>
  <script src="https://codemirror.net/mode/xml/xml.js"></script>
  <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
  <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
  <script>
    var app = angular.module('flapperNews', ['ui']);
    app.controller('MainCtrl', ['$scope', function ($scope) {
      $scope.x = "<html><body>abc</body></html>";
    }])
  </script>
</head>
<body ng-controller="MainCtrl">
  <div ui-codemirror ng-model="x"></div>
</body>
</html>

有谁知道如何正确使用ui-codemirror directive？

【问题讨论】：

标签： angularjs codemirror ui-codemirror

【解决方案1】：

您可以添加以下库

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.js"></script>

并删除以下内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>

angular-ui.js 有旧的 codemirror 指令

注入

var app = angular.module('flapperNews', ['ui.codemirror']);

例如JSBin

【讨论】：

您的 codepen 不断为我重新加载/刷新，但这个想法是正确的。这里是JSBin 记录...谢谢...
那是相同的代码，我更新了链接，可能是codepen的问题。

【解决方案2】：

只需将div 替换为textarea，如下代码（jsbin）

<textarea ui-codemirror ng-model="x"></textarea>

您可以在 https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js 但https://github.com/angular-ui/ui-codemirror/blob/master/src/ui-codemirror.js 没有。

因此您可以等待angular-ui 更新它或单独使用ui-codemirror 进行最后更改。

【讨论】：

我知道这种方式可行（有一些限制），我想要的是让<div ui-codemirror ... 或<ui-codemirror>... 工作，正如他们的文档描述的那样......