After upgraded to version 1.1.9. The console started be polluted by this message:

Automatically scrolling cursor into view after selection change this will be disabled in the next version set editor.$blockScrolling = Infinity to disable this message

I have a lot of ui-ace editors, most of them don't have any onLoad. Can you take them away? Thanks.

Hi,

I was a bit surprised to find out that when I update the $scope variable, the editor does not update.
Do I need to call some update method? Does that mean I need to save the editor from the onLoad event? Or is there something I can inject into my controller?

I'm wondering why this is not built-in.

Thanks

A file path in the main field in bower.json must be changed, otherwise grunt-bower-install will inject a wrong (non-existing) file.

Gives me this:

bower ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/angular/bower-angular.git", exit code of #128

After upgrading to ui-ace 0.2.0, I get the following error when ui-ace calls my onChange function:

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.3.8/$rootScope/inprog?p0=%24digest
    at REGEX_STRING_REGEXP (https://localtest.evergage.com:8443/ui/bower_components/angular/angular.js:63:12)
    at beginPhase (https://localtest.evergage.com:8443/ui/bower_components/angular/angular.js:14737:15)
    at Scope.$get.Scope.$apply (https://localtest.evergage.com:8443/ui/bower_components/angular/angular.js:14481:11)
    at link.executeUserCallback (https://localtest.evergage.com:8443/ui/bower_components/angular-ui-ace/ui-ace.js:199:19)
    at Array.link.listenerFactory.onChange (https://localtest.evergage.com:8443/ui/bower_components/angular-ui-ace/ui-ace.js:237:15)
    at r._signal (https://localtest.evergage.com:8443/ui/bower_components/ace-builds/src-min-noconflict/ace.js:1:48711)
    at onChange (https://localtest.evergage.com:8443/ui/bower_components/ace-builds/src-min-noconflict/ace.js:1:149291)
    at r._signal (https://localtest.evergage.com:8443/ui/bower_components/ace-builds/src-min-noconflict/ace.js:1:48711)
    at removeInLine (https://localtest.evergage.com:8443/ui/bower_components/ace-builds/src-min-noconflict/ace.js:1:120868)
    at remove (https://localtest.evergage.com:8443/ui/bower_components/ace-builds/src-min-noconflict/ace.js:1:120408)

I am using Angular 1.3.8 and Ace 1.1.7.

Here's what my HTML looks like:

<div ng-model="formData.cssContent"
        ui-ace="{ useWrapMode: true, mode: 'css', onLoad: aceLoaded, onChange: contentChanged }"         
        ng-readonly="!contentEditable">
</div>

Check out this plunker http://plnkr.co/edit/zNdlc3jts4a8w3kS08uw?p=preview

The second editor doesn't render until you make a modification.

I assume your intention was to continue supporting those of us lingering on the 1.1.x and 1.2.x branches, but unfortunately moving from $apply() to $applyAsync() has failed in that endeavor. I haven't read the conversation for why that move needed to be made, but the newer function is undefined on $scope in earlier branches and this causes erratic, breaking behavior.

angular-ui-ace works great, I got ACE embedded in my Angular app. Next problem is I'm trying to load a custom mode. In my $scope.aceLoaded callback, I am able to set the modePath as follows:

ace.config.set("modePath", "customModes");
...
session.setMode('ace/mode/tester');

So far so good, it loads the mode-tester.js mode from customModes. However, mode-test.js promply crashes with:

Uncaught ReferenceError: define is not defined 

At the first line which looks like this (see the Wiki):

define('ace/mode/tester', function(require, exports, module) {

So clearly, things like "define" and "require" aren't getting set up. Not sure if this is a requirejs thing, although it seems as thus far I haven't needed to use requirejs with Angular.

Any ideas?

The version available via bower doesn't match the updated one in github. In particular I needed the code from #26 , so I had to track the github commit rather than the normal bower install.

Based on the OnLoad example in the ReadMe, the function name is not $eval-ed to the OnLoad function defined on a ng-controller's scope.

I suspect that this will also occur with onChange as well

Hey,

what would be the best way to set the validity of ngModel, based on the value of getAnnotations?

I can access the getAnntations values by doing the following in my controller

$scope.aceLoaded = function(editor) {
  editor.getSession().on('changeAnnotation', function() {
    var annot = editor.getSession().getAnnotations();
  });
};

Within the uiAcedirective it would be possible to set the validity of the model by calling ngModel.$setValidity('annotations', isValid)

Whats your opinion about implementing this within the uiAce directive?

Bests, Mark

calling undo and redo won't update ngModel

I didn't see an easy way to do this. I tried the obvious, with no luck:

  $scope.uiAceConfig =
    useWrapMode : true
    showGutter: true
    theme: 'twilight'
    mode: 'html'
    fontFamily: 'Inconsolata'
    fontSize: '16px'

<div ui-ace="uiAceConfig" ng-model="content.html"></div>

Anyone find a way to do this? Thanks!

It seems obvious in hindsight, but although you give an example of loading an editor with just mode: "xml" instead of mode: "ace/mode/xml", this isn't what you'd expect coming from the Ace documentation itself. It might be worth insisting on the point in the README.

When we try to use <div ui-ace readonly="true"></div>, the editor doesn't become read-only. I think it may have something to do with the fact that the browser renders readonly="true" as just readonly, and if you only include the readonly attribute itself in the Plunker example, it doesn't work either. The ="true" part is mandatory but you can't get that to show up in the source (at least not in Chrome stable).

cc: @jmartin4563

$attr.$observe('readonly') 
    attrs.$observe('readonly', function (value) {
          acee.setReadOnly(value === 'true');
 });

if readonly is not defined in attributes, it will return false, then overwrite _editor.setReadOnly(true) in onLoad callback in my case

Does Ace work with other elements besides <div>? I've got something like this:

<div ui-ace style="height: 200px;"></div>

...which shows the ace editor in the div, as expected. But if I just change it to this:

<textarea ui-ace class="form-control" style="height: 200px;"></textarea>

I can't even load the page -- Chromium tab will just hang, and eventually crash.

EDIT: sorry, I copied the sample code in incorrectly -- fixed now.

is it possible to forward options or get access to the ace.config object? in our case we want to modify the basePath option to load themes and mode files from a specific folder

ace.config.set("basePath", "/path/to/src");

In some cases the syntax error doesn't disappear anymore. As the screenshot shows I can edit the json in ace which is rendered as a tree on the right, which perfectly works.

If no other people are experiencing this, it has to be a local issue, which I need to investigate further.

I'm trying to create some actions to insert pre-defined text into the editor, but it doesn't appear to cause the model to change.

template:

in controller:

editor.insert("text to insert");

this is not causing the updateDefinition() method to be called.

I use the recommended way to set the height of the editor by adding this global CSS:

.ace_editor {
    height: 200px;
}

Now what if I have two ace editors, but I want to set different height for them. How can I set height separately for them?

Thanks,
Elgs

Does ui-ace supports tool tip?
Like we get by selecting 'Show Token Info' option in kitchen-sink-demo [http://ajaxorg.github.io/ace-builds/kitchen-sink.html]

Thanks

Hi there!

It's possible to set editor mode dynamically, using model variable?

I already tried use them as parameter on the onLoad function but it appears not be supported.

Thanks!

In our app, we have a page with 3 ui-ace editors on the same page - one in html mode, one in css mode, and one in javascript mode. We use the same onLoad callback function for all three, since we want to set most of the same ACE options. But we also want to do a couple things specific to which editor is being configured. In order to determine, in the onLoad function, which of the three editors was being configured, we checked if the editor's mode was html, css, or javascript.

We recently upgraded Angular from 1.2 to 1.3, and ui-ace from 1.1.2 to 1.2.1. After these upgrades, the code described above stopped working, because the onLoad function was being called before, rather than after, the ui-ace options specified in the html had been applied.

Run the below plunk with the browser console open and watch the logging. Notice, that in onchange, the mode specified via ui-ace options in the html has not yet been set on the ACE editor (it's still set to the default mode, "text"), but after a $timeout, the mode has been set to "css".

http://plnkr.co/edit/QGr1j8jjRCVsaTVDveEA?p=preview

The question is, does it make more sense to call the onLoad callback before or after setting the ui-ace options on the ACE editor. I'm thinking setting them before might be more intuitive. What do you think?

Whatever is decided, I think it would be good to document the order in the README.

The option tabSize is missing in the directive so when we define it, it's not taken in account by ace.

  if (angular.isDefined(opts.tabSize)) {
    session.setTabSize(opts.tabSize);
  }

Any interest in extending this functionality to wrap the JavaScript validation feature in ACE?

The javascript file does not contain any comment as to the source of the code or the license it is under. This makes it difficult for end users to see the license. Could this be added to the source files?

It is possible to create marker for example.
I have error with Range constructor
TypeError: Illegal constructor
Example :

$scope.aceLoaded = function(_editor){
var _session = _editor.getSession();
_session.addMarker(new Range(1, 0, 10, 0), "ace_active-line", "fullLine");
};

Hi there - my team uses angular-ui-ace and would love to help with some outstanding issues:

• Existing issues #65, #43, and #29
• Helping however possible with the release cycle time - from getting a release tagged to having it available via bower
• Triage/label/review issues/PRs

I know I can just do PRs on the first three, and we've already dealt with things like #43 via bower overrides, but what about the second? I noticed there is a bower branch, tags, a download link to the tag on http://angular-ui.github.io/ui-ace/. Just looking for some contribution guidance here. Let me know where you could use the most help.

Hi, is there a way to receive an event when the user's selected line changes? (Along with the selected line number and line text)

I sadly can't reproduce this error very easily but there are cases where I was making multiple editors on a page with ng-models (in an ng-repeat directive) and I was getting $digest already in progress from the onchange handler. There is already a line in here checking for scope.$$phase but I had to also check the rootscope using scope.$root.$$phase. This fixed my problem and appeared to work fine. I have no idea what the ramifications of this are as I'm pretty new to this stuff but I'd hoped that someone here could tell me.

I am following the Readme, and I can't get the onLoad callback to work. During troubleshoooting, it appears that

    if (angular.isFunction(opts.onLoad)) 

in ui-ace.js is evaluating false. No code placed in this block executes.

My controller is taken straight from the readme.

var myModule = angular.module('joes_ide', ['ui.ace']);

myModule.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(){ ... });
  };

}]);

Likewise, my view-

<div ui-ace="{
  useWrapMode : true,
  showGutter: false,
  theme:'twilight',
  mode: 'xml',
  onLoad: aceLoaded,
  onChange: aceChanged
}"></div>

Tested with Chrome/Firefox on Mac & Linux:

This appears also to impacting the demo. Visit http://angular-ui.github.io/ui-ace/ and notice the accented 'a''s between the spaces.

Is there some specific reason why the ui-ace throws an exception when we are dealing with array or object types? At the first glance it seems perfectly safe to just stringify those types. Am I missing something?

Just wanted to hear your opinion about stringifying those before I submitted a PR.

I propose to support also this option

    if (angular.isDefined(opts.fontsize)) {
      acee.setFontSize(opts.fontsize);
    }

That we could use as aceOption :

$scope.aceOption = {
mode: 'xml',
theme: $scope.theme.toLowerCase(),
fontsize: '18px',

I'm working on learning AngularJS and associated workflow using the Yeoman generator-angular to scaffold the basic seed project. I'm evaluating a couple embeddable editors and installed ui-ace via Bower:

bower install angular-ui-ace -S

This properly installs everything to bower_components and adds ui-ace.js as a dependency in bower.json:

{
  ...
  "angular-ui-ace": "~0.1.1"
}

Which in turn adds the script to index.html on grunt:

<script src="bower_components/angular-ui-ace/ui-ace.js"></script>

The issue is ace.js (which is required) is not added as a dependency on install:

<script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>

Does anyone know the proper syntax to add it as a dependency in bower.json so it is included in my build?

How do I make the editor div auto expand as I type the content into it? I tried overflow:auto css but it did not help.

hi!
at first thx for the great directive! we noticed that there is a problem when initializing the ace editor invisible using ng-show - here a plnkr for the problem http://plnkr.co/edit/UO0xy9DwSe5XxmZwQ7rT

I tried to add autocomplete to editor like in examples on ace page
ace homepage (when i press ctrl+space i see variants from snippets)
by following instructions on ace wiki page
but it would't work well: jsfiddle
(i can`t see autocomplete box, but can select one of the variants by using arrow keys)

Ace will leak when the directive is removed by angular.

I had the editor in a tab-content controlled by ng-switch, the results were bad.

My solution for now is just using my own tab implementation that does not delete and recreate the elements like ng-switch does.

ui.ace was working on angular-1.3.0-beta.9 but is broken on 1.3.2 with this error:

TypeError: Cannot read property '$formatters' of null
    at link (http://localhost:3041/vendor/angular-ui-ace/ui-ace.js:171:18)
    at invokeLinkFn (http://localhost:3041/vendor/angular/angular.js:8125:9)
    at nodeLinkFn (http://localhost:3041/vendor/angular/angular.js:7637:11)
    at compositeLinkFn (http://localhost:3041/vendor/angular/angular.js:6993:13)
    at nodeLinkFn (http://localhost:3041/vendor/angular/angular.js:7632:24)
    at compositeLinkFn (http://localhost:3041/vendor/angular/angular.js:6993:13)
    at compositeLinkFn (http://localhost:3041/vendor/angular/angular.js:6996:13)
    at publicLinkFn (http://localhost:3041/vendor/angular/angular.js:6872:30)
    at compile (http://localhost:3041/vendor/angular-ui-router/release/angular-ui-router.js:2805:9)
    at invokeLinkFn (http://localhost:3041/vendor/angular/angular.js:8125:9) <div ui-ace="{
          useWrapMode : true,
          showGutter: false,
          theme:'twilight',
          mode: 'sql',
          onLoad: aceLoaded,
          onChange: aceChanged
        }" class=" ace_editor ace-tm"> 

I'm using requirejs, as as such, all JS gets concatenated into a single file. I'm setting workerPath to the correct folder containing Ace, but theme and mode don't seem to get picked up. Even specifying paths for both have no effect.

Any thoughts on how to correctly get theme and mode working with a requirejs / concatenated / uglified / set up?

Relevant config:

    $scope.uiAceConfig =
      theme: 'chrome'
      mode: 'html'
      onLoad: $scope.aceLoaded
      workerPath: '/public/lib/ace-builds/src-min-noconflict'

Thanks!

when calling aceLoaded getValue() or getLine(0) returns null. So the value is not available in this moment.

$scope.aceLoaded = function(_editor) {
    var _session = _editor.getSession();
    console.log(_session.getValue());

version 1.1.1 has some significant improvements over 1.0.0

Using Ace 1.1.1 in my ui-ace setup seems to result in the editor initialising but now displaying (what's with that?).

Has anyone looked into where the incompatibility lies? How hard would a fix be?

Update: setting .ace_editor { position: absolute; } seems to fix the no display issue. Are there any other reasons to be hesitant about updating ui-ace's dependency?

Seems like ace has stopped tagging releases in ajaxorg/ace-builds (last one was 8 months ago), despite lots of new updates being released.

Would it be possible to update ui-ace's dependencies to just use the latest from ace-builds?

• Complains about $ not defined
• Pulling in jQuery through bower doesn't help
• Looks like this: http://cl.ly/image/1Z40431x230v

The onLoad option works great if the parent element is a controller, however if it's a directive it's never called:

http://plnkr.co/edit/CvPSaccYVKZfoesJC7o4?

The problem is it just hasn't binded yet. I hacked around it using this:

    setTimeout(function() {
        opts = angular.extend({}, options, scope.$eval(attrs.uiAce));
        if (angular.isFunction(opts.onLoad)) {
            opts.onLoad(acee);
        }
    }, 0);

However this clearly is slightly hacky (not to mention I had to edit ui-ace, which I'd rather not do). A $watch would probably work as well (and be more appropriate here).

(Thanks for this directive, by the way -- it's been an awesome help.)

I haven't been able to get the example editor initialization to work because it looks like the directive is compiled after the controller is initialized. Here's an example:

In the html:

<div ng-controller="MyController">
  <div ui-ace scope-instance="foo"></div>
</div>

In the controller:

myAppModule.controller('MyController', [ '$scope', function($scope) {

  // this is undefined because
  // the controller is initialized 
  // before the directive is compiled
  var _editor = $scope.foo; 
}]);