错误：uiCodemirror3只能应用于textarea元素
[英]Error: uiCodemirror3 can only be applied to a textarea element
问题描述
According to the doc of ui-codemirror : 
根据ui-codemirror的文档：
The ui-codemirror directive plays nicely with ng-model.
The ng-model will be watched for to set the CodeMirror document value (by setValue).
The ui-codemirror directive stores and expects the model value to be a standard javascript String.
However, my following code ( JSBin ) returns an error Error: uiCodemirror3 can only be applied to a textarea element in the console. 但是，我的以下代码（ JSBin ）返回错误Error: uiCodemirror3 can only be applied to a textarea element控制台中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>
Does anyone know how to correctly use ui-codemirror directive ? 有谁知道如何正确使用ui-codemirror 指令 ？
2 个解决方案
解决方案1
0 2017-02-18 09:08:26
Just replace div with textarea like following code ( jsbin ) 只需将div替换为textarea如以下代码（ jsbin ）
<textarea ui-codemirror ng-model="x"></textarea>
You could find the error message in https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js but https://github.com/angular-ui/ui-codemirror/blob/master/src/ui-codemirror.js doesn't have that. 您可以在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没有。
So you could wait for angular-ui to update it or use ui-codemirror separately to have last changes. 因此，您可以等待angular-ui更新它，或者单独使用ui-codemirror进行最后更改。
解决方案2
0 已采纳 2017-02-18 14:22:23
You can add the following libraries 您可以添加以下库
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-codemirror/0.3.0/ui-codemirror.js"></script>
and remove the following 并删除以下内容
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
angular-ui.js has old codemirror directives angular-ui.js具有旧的codemirror指令
and inject 并注入
var app = angular.module('flapperNews', ['ui.codemirror']);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.