UI.Ace directive

This directive allows you to add ACE editor elements.

Usage

Add the directive to your html:

<div ui-ace></div>

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

.ace_editor { 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 theme to use.
• mode : to set the mode to use.
• onLoad : callback when the editor has finished loading (see below).
• onChange : callback when the editor content is changed ().

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

You’ll want to define the onLoad and the onChange callback on your scope:

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

    $scope.aceLoaded = function(_editor) {
        // Options
        _editor.setReadOnly(true);
    };

    $scope.aceChanged = function(e) {
        //
    };

}]);

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.

Can be read only

Simple demo

<div ui-ace readonly="true"></div>
or
Check me to make Ace readonly: <input type="checkbox" ng-model="checked" ><br/>
<div ui-ace readonly=""></div>

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="{ onLoad : aceLoaded }" ></div>

the $scope.aceLoaded function will be called with the Ace Editor instance as first argument

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

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

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

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

}]);