#StackBounty: Error: uiCodemirror3 can only be applied to a textarea element

Bounty: 50

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">
  https://code.jquery.com/jquery.min.js
  https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js
  https://codemirror.net/lib/codemirror.js
  https://codemirror.net/mode/xml/xml.js
  https://codemirror.net/mode/htmlmixed/htmlmixed.js
  https://codemirror.net/mode/javascript/javascript.js
  https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js
  
    var app = angular.module('flapperNews', ['ui']);
    app.controller('MainCtrl', ['$scope', function ($scope) {
      $scope.x = "abc";
    }])
  
</head>
<body ng-controller="MainCtrl">
  
</body> </html>

Does anyone know how to correctly use ui-codemirror directive?


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.