ui-codemirror directive

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

Requirements

AngularJS
CodeMirror 3.x

Testing

We use karma (the new testacular) and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

npm install -g grunt-cli
npm install
bower install
grunt

The karma task will try to open Firefox as a browser in which to run the tests. Make sure this is available or change the configuration in test\karma.conf.js

Usage

We use bower for dependency management. Add

dependencies: {
"angular-ui-codemirror": "latest"
}

To your components.json file. Then run

bower install

This will copy the ui-codemirror files into your components folder, along with its dependencies. Load the script files in your application:

<script type="text/javascript" src="components/codemirror/lib/codemirror.js"></script>
<script type="text/javascript" src="components/angular/angular.js"></script>
<script type="text/javascript" src="components/angular-ui-codemirror/ui-codemirror.js"></script>

Add the CodeMirror module as a dependency to your application module:

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

Apply the directive to your form elements:

<textarea ui-codemirror ng-model="x"></textarea>

Options

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',
	};
}]);

<textarea ui-codemirror="editorOptions" ng-model="x"></textarea>

Working with ng-model

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.

ui-codemirror events

The CodeMirror events are supported has configuration options. They keep the same name but are prefixed by on.. This directive expects the events to be javascript Functions. For example to handle changes of in the editor, we use onChange

<textarea ui-codemirror="{
            lineWrapping : true,
            lineNumbers: true,
            mode: 'javascript',
            onChange: reParseInput
        }" ng-model="x"></textarea>

Now you can set the reParseInput function in the controller.

$scope.reParseInput = function(){
	$scope.errorMsg = "";
	$timeout.cancel(pending);
	pending = $timeout($scope.workHere, 500);
};

ui-refresh directive

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....

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

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 "!=="

dcolens / ui-codemirror