UI.CodeMirror

This directive allows you to add CodeMirror to your textarea elements.

Code on Github Download (0.3.0)

Minimal code

Code mirror here
<section>
  <div ui-codemirror >Code mirror here</div>
</section>

General options

<html style="color: green"> <!-- this is a comment --> <head> <title>HTML Example</title> </head> <body> The indentation tries to be <em>somewhat &quot;do what I mean&quot;</em>... but might not match your style. </body> </html>
<section>
  <div ui-codemirror="{
      lineNumbers: true,
      theme:'twilight',
      readOnly: 'nocursor',
      lineWrapping : true,
      mode: 'xml'
    }" >&lt;html style=&quot;color: green&quot;&gt;
&lt;!-- this is a comment --&gt;
&lt;head&gt;
&lt;title&gt;HTML Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what
I mean&amp;quot;&lt;/em&gt;... but might not match your style.
&lt;/body&gt;
&lt;/html&gt;</div>
</section>

Mode-Changing demo

Mode : 
<section ng-controller="CodemirrorCtrl">

  <textarea ui-codemirror="cmOption" ng-model="cmModel"></textarea>

  Mode : <select ng-model="mode" ng-options="m for m in modes" ng-change="modeChanged()"></select>

</section>
 
app.controller('CodemirrorCtrl', ['$scope', function($scope) {

  // The modes
  $scope.modes = ['Scheme', 'XML', 'Javascript'];
  $scope.mode = $scope.modes[0];


  // The ui-codemirror option
  $scope.cmOption = {
    lineNumbers: true,
    indentWithTabs: true,
    onLoad : function(_cm){

      // HACK to have the codemirror instance in the scope...
      $scope.modeChanged = function(){
        _cm.setOption("mode", $scope.mode.toLowerCase());
      };
    }
  };



  // Initial code content...
  $scope.cmModel = ';; Scheme code in here.\n' +
    '(define (double x)\n\t(* x x))\n\n\n' +
    '<!-- XML code in here. -->\n' +
    '<root>\n\t<foo>\n\t</foo>\n\t<bar/>\n</root>\n\n\n' +
    '// Javascript code in here.\n' +
    'function foo(msg) {\n\tvar r = Math.random();\n\treturn "" + r + " : " + msg;\n}';

}]);