Error: uiCodemirror3 can only be applied to a textarea element

问题

According to the doc of 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.

<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?

回答1:

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

and inject

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

Example JSBin

回答2:

Just replace div with textarea like following code ( 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.

So you could wait for angular-ui to update it or use ui-codemirror separately to have last changes.

来源：https://stackoverflow.com/questions/42245844/error-uicodemirror3-can-only-be-applied-to-a-textarea-element

标签

angularjs

codemirror

ui-codemirror