将 CodeMirror 应用于 ng-model-bound 文本区域答案

【问题标题】：Apply CodeMirror to a ng-model-bound textarea将 CodeMirror 应用于 ng-model-bound 文本区域
【发布时间】：2016-12-27 12:32:10
【问题描述】：

我正在编写一个非常基本的游乐场。出于某种原因，我需要将 html 面板嵌入到 AngularJS 应用程序中。

在this version 中，我将一个JQuery 更改侦听器放到CSS 面板，并将CodeMirror 应用到文本区域。它奏效了。

我对在 AngularJS 应用程序中使用 JQuery 事件侦听器感到不舒服，所以我决定将 CSS 面板绑定到 AngularJS 应用程序，并创建了this version。但现在，问题是 CodeMirror 代码（我在下面评论）不再起作用：

HTML：

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    HTML:<br>
    <textarea rows=10 cols=40 ng-model="area1">html body area</textarea>
    <br>CSS:<br>
    <textarea id="css" rows=10 cols=40 ng-model="css"></textarea>
  </div>
  Output:
  <section id="output">
    <iframe></iframe>
  </section>
</body>

JavaScript：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.area1 = "<body>default</body>";  
    $scope.$watch('area1', function (json) {
      render();
    }, true);

    $scope.css="body {color: red}";
    $scope.$watch('css', function (json) {
      // CodeMirror does not work anymore
      // var cm_opt = { mode: 'css', gutter: true, lineNumbers: false };
      // var css_box = document.getElementById("css");
      // var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
      render();
    }, true);

    function render () {
      var source = "<html><head><style>" + $scope.css + "</style></head>" + 
                   $scope.area1 +"</html>";

      var iframe = document.querySelector('#output iframe'),
          iframe_doc = iframe.contentDocument;

      iframe_doc.open();
      iframe_doc.write(source);
      iframe_doc.close();
    }
 });

有人知道如何让 CodeMirror 在这里工作吗？

此外，在 AngularJS 应用程序中使用 JQuery 事件侦听器真的是个坏主意吗？使用 AngularJS + CodeMirror 编写这个游乐场的最佳结构是什么？

编辑1：我找到this thread，然后我做了一个codeMirror directive，效果不好。 DevTools 在CodeMirror.fromTextArea(...) 向我显示错误TypeError: textarea.getAttribute is not a function。

【问题讨论】：

标签： jquery angularjs angularjs-directive codemirror ui-codemirror

【解决方案1】：

Here我在angularjs中添加了Demo For Code镜像。希望对你有帮助……

Here Demo

【讨论】：

确实，我应该使用ui-codemirror。为了记录，这里是一个working version，以及一个相关的问题：Use 2 ui-codemirrors in 1 controller

【解决方案2】：

解决 OP 的第二次尝试的响应

在指令的 link 函数中，您将 elem 参数用作纯 HTML 元素（codemirror 预期），但 Angular 将其作为 JQLite 包装元素提供 - 所以基本上您只需要获取 HTML从中提取元素并将 it 提供给 codemirror，然后它将起作用：

var editor = CodeMirror.fromTextArea(elm[0], cm_opt);

（注意elem[0] 而不是elem）

在 AngularJS 中，使用指令来包装基于 JQuery 的逻辑以制作依赖于其他技术（如代码镜像）的组件并不是一个坏习惯。在某些情况下，您可以自己执行此操作，但也可以使用其他答案中提到的已构建的第三方库。

无论做什么，请确保通过使用指令和服务很好地封装非角度逻辑。

希望这会有所帮助。

【讨论】：

谢谢，var editor = CodeMirror.fromTextArea(elm[0], cm_opt); 确实有效，我将使用ui-codemirror...

【解决方案3】：

你可以使用

UI.Codemirror directive

【讨论】：