Name: ui-ace
Owner: looker
Description: This directive allows you to add ACE editor elements.
Forked from: angular-ui/ui-ace
Created: 2015-12-15 00:08:01.0
Updated: 2017-03-09 21:45:30.0
Pushed: 2017-03-09 21:45:31.0
Homepage: http://angular-ui.github.io/ui-ace
Size: 1113
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
This directive allows you to add ACE editor elements.
You can get it from Bower
r install angular-ui-ace#bower
This will copy the UI.Ace files into a bower_components
folder, along with its dependencies. Load the script files in your application:
ipt type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>
ipt type="text/javascript" src="bower_components/angular/angular.js"></script>
ipt 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:
myAppModule = angular.module('MyApp', ['ui.ace']);
Finally, add the directive to your html:
ui-ace></div>
To see something it's better to add some CSS, like
_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 :
ui-ace="{
eWrapMode : true,
owGutter: false,
eme:'twilight',
de: 'xml',
rstLineNumber: 5,
Load: aceLoaded,
Change: aceChanged
/div>
You'll want to define the onLoad
and the onChange
callback on your scope:
pModule.controller('MyController', [ '$scope', function($scope) {
cope.aceLoaded = function(_editor) {
// Options
_editor.setReadOnly(true);
cope.aceChanged = function(e) {
//
To handle other options you'll have to use a direct access to the Ace created instance (see below).
You can specify advanced options and even require
options in the directive, as well. For this example, you
will have to include the ext-language_tools.js
file from the ace source code.
This will copy the UI.Ace files into a bower_components
folder, along with its dependencies. Load the script files in your application:
ipt type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ext-language_tools.js"></script>
tml
ui-ace="{
quire: ['ace/ext/language_tools'],
vanced: {
enableSnippets: true,
enableBasicAutocompletion: true,
enableLiveAutocompletion: true
/div>
To include options applicable to the ACE renderer, you can use the rendererOptions
key:
ui-ace="{
ndererOptions: {
maxLinks: Infinity
/div>
Trying to use ace with concatenated javascript files usually fails because it changes the physical location of the workerPath
. If you
need to work with bundled or minified versions of ace, you can specify the original location of the workerPath
on disk (not the bundled file).
This should be the folder on disk where ace.js
resides.
ui-ace="{
rkerPath: '/path/to/ace/folder'
/div>
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
ui-ace readonly></div>
k me to make Ace readonly: <input type="checkbox" ng-model="checked" ><br/>
ui-ace ng-readonly="checked"></div>
For more interaction with the Ace instance in the directive, we provide a direct access to it. Using
ui-ace="{ onLoad : aceLoaded }" ></div>
the $scope.aceLoaded
function will be called with the Ace Editor instance as first argument
pModule.controller('MyController', [ '$scope', function($scope) {
cope.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:
install -g grunt-cli
install && bower install
t
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
We have one task to serve them all !
t serve
It's equal to run separately:
grunt connect:server
: giving you a development server at http://127.0.0.1:8000/.
grunt karma:server
: giving you a Karma server to run tests (at http://localhost:9876/ by default). You can force a test on this server with grunt karma:unit:run
.
grunt watch
: will automatically test your code and build your demo. You can demo generation with grunt build:gh-pages
.
This repo is using the angular-ui/angular-ui-publisher. New tags will automatically trigger a new publication. To test is locally you can trigger a :
t dist build:bower
it will put the final files in the 'dist' folder and a sample of the bower tag output in the 'out/built/bower' folder.