Dozent Dozent - 15 days ago 5
JSON Question

Can't embed ACE Editor "ui-ace need ace to work" error with angular-ui-ace

I'm trying to embed ACE editor elements into my AngularJS project in order to allow JSON editing feature in it. Here are all configurations/settings so far:

Bower.json

"dependencies": {
"angular-ui-ace": "v0.2.3"
}


Module dependency

angular.module('myApp', ['ui.ace']);


ACE settings in controller

$scope.ace_options = {
useWrapMode : false,
showGutter: true,
mode: 'json',
onLoad: function() {
console.log('onLoad fired.');
},
onChange: function() {
console.log('onChange fired.');
}
};


Html

<div id="editor" ui-ace="ace_options" ng-model="myJson" style="height: 400px"></div>


However I get always following error:


"message": "Error: ui-ace need ace to work... (o rly?)",


What I'm doing wrong or did I missed something?

Answer

After fetching the scripts with Bower, make sure you include them in your application. Following is the order of scripts provided in the Ace UI docs.

<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>