Dynamically inserting strings into ACE code editor, angular JS

Question

This is an app I am doing with angular JS, and flask as a backend.

I pretty much followed the ACE code editor tutorial exactly as shown here and have that much of the code working. I now want to do something like this:

<div id= "editor">
    {{ '{{xml_string}}' }}
</div>

Where xml_string is grabbed from the backend via an $http.get call, and passed to the scope inside my controller like this. I am able to see the xml_string in its entirety when I do something like this:

<p> {{'{{xml_string}}'}} </p>

But for some reason, this is not displaying inside the code editor.

Now, the reason I have been using:

{{ '{{xml_string}}' }} 

instead of:

{{xml_string}}

is because of a clash between angular's syntax and flask/jinja's syntax. I don't think that that is an issue. Anyone have advice on how to do something like this? I can post more code if necessary, but I hoped this is enough to describe the problem.

Answer 1

You need to load the code into ACE as ACE most likely does not monitor the DOM for changes - instead, use editor.getSession().setValue(yourtext) (editor.setValue(yourText, -1) would work as well, but it leaves entry in undo history)