Dozent Dozent - 9 months ago 62
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:


"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.');


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

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>