This directive allows you to add ACE editor elements.
- AngularJS
- Ace 1.x
You can get it from Bower
bower install angular-ui-ace
This will copy the UI.Ace files into a bower_components
folder, along with its dependencies. Load the script files in your application:
<script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-ace/ui-ace.js"></script>
Add the UI.Ace module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['ui.ace']);
Finally, 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; }
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:
myAppModule.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).
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.
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="{{checked}}"></div>
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
myAppModule.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(){ ... });
};
}]);
We use Karma 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 and Chrome as browser in which to run the tests. Make sure this is available or change the configuration in test\karma.conf.js
You can watch files change for your tests with
grunt watch
Make sure to have a Karma server available with it.
grunt server
(you can force a test on this server with grunt karma:unit:run
)
The documentation is generated by bower and grunt. To build it run :
grunt build-doc
And then, launch a built-in web server on the angular-ui-docs bower module
cd bower_components/angular-ui-docs/
php -S localhost:8000
or
python -m SimpleHTTPServer
Then check your http://localhost:8000/
Tips for fast development : Inline everything
grunt build-doc && cd bower_components/angular-ui-docs/ && php -S localhost:8000 && cd ../..