Search code examples
javascriptangularjsinternet-explorerfirefoxace-editor

ACE code editor issues in Internet explorer


I am so frustrated with internet explorer (who isn't).

For back ground, I am using ACE code editor in tandem with angular js.

This tutorial

is almost exactly what I copied for my directive, minus these two lines.

var MarkdownMode = require('ace/mode/markdown').Mode;
editor.getSession().setMode(new MarkdownMode());

Instead, for the mode I am using "xml".

editor.getSession().setMode('ace/mode/xml');
editor.setReadOnly(true);

In my html, I use the directive like so.

<div class= "editor" data-ace="" data-ng-model="xml_string"></div>

And I grab the "xml_string" from the backend/my controller like so.

myApp.controller('resourceDisplayCtrl', function($scope, $http){

    $scope.xml_string = "";

    var route = "/get_resource_info/" + $scope.resource + '/';

    $http.get(route).success(function(data){
        $scope.xml_string = data['data'];
    });
});

I can put more code down if desired, but I think this gets the gist of it. My problem, is that my code works as expected... in firefox. The xml_string is set correctly from the backend, and loads the xml file into the editor.

However, this never works on the first attempt with IE. Sometimes, if I spam the IE refresh button, eventually the xml file will load, but to me this is even stranger. Maybe a cache issue? I tried deleting the cache and no go. Any ideas?

edit : I included an

alert(data['data']); 

So I know that the xml string is correctly sent from the back end.


Solution

  • This was a mistake with the placement of my script tags. Lesson learned, place your ace tag before your angular tag if you want an ACE directive to work properly :)