ui-ace directive

This directive allows you to add ACE editor elements.

Requirements

• AngularJS
• Ace 2.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-ace": "latest"
}

To your components.json file. Then run

bower install

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

<script type="text/javascript" src="components/ace-builds/src-min-noconflict/ace.js"></script>
<script type="text/javascript" src="components/angular/angular.js"></script>
<script type="text/javascript" src="components/angular-ui-ace/ui-ace.js"></script>

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

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

Apply the directive to your form elements:

<div ui-ace></div>

To see something it's better to add some CSS, like

.ace_editor { top: 0; bottom: 0; right: 0; left: 0; }

Note: the ui-ace directive is wrapped in a div.ace_editor_wrapper. Thus you can use Ace as a block like so :

.ace_editor_wrapper { position : relative; height: 200px}

Options

Ace doesn't provide a one gate access to all the options the jquery way. Each option is configured with the function of a specific instance. See the api doc for more.

Although, ui-ace automatically handles some handy options :

• showGutter : to show the gutter or not.
• useWrapMode : to set whether or not line wrapping is enabled.
• theme : to set the thme to use.
• mode : to set the mode to use.

<div ui-ace="{
  useWrapMode : true,
  showGutter: false,
  theme:'twilight',
  mode: 'xml'
}"></div>

To handle other options you'll have to use a direct access to the Ace created instance (see below).

Working with ng-model

The ui-ace directive plays nicely with ng-model.

The ng-model will be watched for to set the Ace EditSession value (by setValue).

The ui-ace directive stores and expects the model value to be a standard javascript String.

Ace instance direct access

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

<div ui-ace scope-instance="foo" ></div>

you will have in $scope.foo the Ace Editor instance

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

  // Editor part
  var _editor = $scope.foo;
  var _session = _editor.getSession();
  var _renderer = _editor.renderer;

  // Options
  _editor.setReadOnly(true);
  _session.setUndoManager(new UndoManager());
  _renderer.setHighlightActiveLine(false);

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

}]);