This directive allows you to add ACE editor elements.
Add the directive to your html:
To see something it’s better to add some CSS, like
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 ().
You’ll want to define the
onLoad and the
onChange callback on your scope:
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).
Can be read only
Ace instance direct access
For more interaction with the Ace instance in the directive, we provide a direct access to it.
$scope.aceLoaded function will be called with the Ace Editor instance as first argument