Ошибка: uiCodemirror3 можно применить только к элементу textarea

Согласно документу ui-codemirror:

Директива ui-codemirror прекрасно работает с ng-model.

Модель ng будет отслеживаться для установки значения документа 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?


angularjs codemirror ui-codemirror
person Community    schedule 15.02.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете добавить следующие библиотеки

<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

person Pavan Kumar Jorrigala    schedule 18.02.2017
comment
Ваш codepen постоянно перезагружается/обновляется для меня, но идея верна. Вот JSBin для записи... Спасибо... - person ; 19.02.2017
comment
Это тот же код, я обновил ссылку, может быть проблема с codepen. - person Pavan Kumar Jorrigala; 19.02.2017

arrow_upward
0
arrow_downward

Просто замените 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 отдельно, чтобы внести последние изменения.

person fingerpich    schedule 18.02.2017
comment
Я знаю, что этот способ будет работать (который имеет некоторые ограничения), я хочу, чтобы <div ui-codemirror ... или <ui-codemirror>... работали, как описано в их документе... - person ; 18.02.2017