Features/provide custom ace function

[kayhadrin]

(edit: re-submit PR because my previous one was done on the wrong branch and was based on now out-dated code)

Hi there,

First of all, thank you for taking the time to write this Angular+Ace integration directive.

I'm currently using it with a popup window in which I inject my own Angular template and scope.
That allows me to have an app that opens popup windows and still has the ability to use 2-way bindings with them.

So here's how I'm doing it:

1. Include ace.js in the popup so that it can inject its own css/js properly
2. Use the uiAce directive to show an ACE editor instance inside an angular template (+scope) that is injected in a popup window
3. Modify the ui-ace.js code to allow using a custom ace function instead of the one in window.ace.
   This is because my ui-ace.js file was loaded from the main app's window (not the popup).
4. When providing the config options to uiAce, I provide the popupWindow.ace function - which is the ace function from the popup's window object.

And it seems to work fine. :-)

So if you're interested, here's a pull request to add it to your arsenal.

Cheers,

David

[douglasduteil]

It feels a little strange why don't you directly load ace in the parent window ( the one that opens the popup ) ?

[kayhadrin]

I'm not sure to remember properly now since it's been almost 7 months since I raised that PR.

Here's how the problem appeared (from memory):

My goal is to show an ace editor textarea in a popup window but control it from the parent window
So I create a popup window and inject an angular template and scope in it so that the parent window can control it. With this, I can share objects between the parent and the popup window through the scope object and things look fine.

However, the ui-ace directive's JS code was loaded in the parent window, and by default, it tries to create the acee variable from window.ace (so that's ace in the parent window). That's normal because ui-ace's js code runs in the context of the parent window.

Because the ace library tries to inject its own css (and maybe additional js? not sure...) from the window where the it was first loaded, it ends up doing it in the parent window instead of the popup - which does not work properly.

So that's why I did those changes which enable me to force ui-ace to use the ace library that was pre-loaded in the popup window.

Thanks to that, the ace dependencies are loaded properly in the right place and the ace editor works fine.

I hope this sheds more light on the reason to make this PR.

Of course, if you can propose a better way to do this, I'm interested to hear about it :-)

PS: desole pour la longue reponse. Je suis aussi Francais mais je pourrais pas expliquer tout ca sans passer en anglais ^^;

[kayhadrin]

Is there anything I could do to help this PR progress?

[mcblum]

@kayhadrin Thanks for making this PR. Would implementing this enable me to define a custom ace instance that could be passed around for other libraries to use? Our issue is that we're using ng-jsoneditor and for whatever reason when you are also using Ace, it says it can't find it. It allows you to pass a custom ace in its options, but I can't seem to figure out how to do that.

Thanks in advance for any assistance.

[kayhadrin]

@mcblum As far as I can remember, you should be able to load Ace individually on the page, then provide it to this angular ui-ace plugin and also share that ace instance to other tools of your choice.
I assume you've tried my version of the ui-ace module, right?