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

• AngularJS 1.3.x
• CodeMirror 4.8.x

You can get it from Bower

bower install angular-ui-codemirror

This will copy the UI.Codemirror files into a bower_components folder, along with its dependencies. Load the script files in your application:

<link rel="stylesheet" type="text/css" href="bower_components/codemirror/lib/codemirror.css">
<script type="text/javascript" src="bower_components/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>

Add the UI.Codemirror module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ui.codemirror']);

Finally, add the directive to your html, as attribute :

// Not well supported yet but still... We need feedbacks to improve it...
<textarea ui-codemirror></textarea>

<div ui-codemirror></div>

as element :

<ui-codemirror></ui-codemirror>

All the Codemirror configuration options can be passed through the directive.

myAppModule.controller('MyController', [ '$scope', function($scope) {
	$scope.editorOptions = {
		lineWrapping : true,
		lineNumbers: true,
		readOnly: 'nocursor',
		mode: 'xml',
	};
}]);

If you update this variable with the new values, they will be merged and the ui will be updated.

<ui-codemirror ui-codemirror-opts="editorOptions"></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.

If you apply the refresh directive to element then any change to do this scope value will result to a refresh of the CodeMirror instance.

The ui-refresh directive expects a scope variable that can be any thing....

<div ui-codemirror ng-model="x" ui-refresh='isSomething'></div>

Now you can set the isSomething in the controller scope.

$scope.isSomething = true;

Note: the comparison operator between the old and the new value is "!=="

For more interaction with the CodeMirror instance in the directive, we provide a direct access to it. Using

<div ui-codemirror="{ onLoad : codemirrorLoaded }" ></div>

the $scope.codemirrorLoaded function will be called with the CodeMirror editor instance as first argument

myAppModule.controller('MyController', [ '$scope', function($scope) {

  $scope.codemirrorLoaded = function(_editor){
    // Editor part
    var _doc = _editor.getDoc();
    _editor.focus();

    // Options
    _editor.setOption('firstLineNumber', 10);
    _doc.markClean()

    // Events
    _editor.on("beforeChange", function(){ ... });
    _editor.on("change", function(){ ... });
  };

}]);

We use Karma and jshint to ensu