Search code examples
angularjsace-editor

Using ACE editor with Angular - splitting the value by newline


I am using the ace-ui directive with angular to use the ACE code editor in my application. It works great so far, but I am having one little caveat.

I need code that is written to get stored as an array of strings, separated by the \n character. This is easy to do at first, I just do this;

In the controller, I have a $scope.$watch on the actual editor text, it looks like this;

app.controller("EditorCtrl", [ "$scope", function($scope){
   $scope.Model = {
      // other properties
      Scripting: ""
   };

   $scope.Editor = {
      // other properties
      Scripting: ""
   };

   $scope.aceLoaded = function(editor){
        ace.require("ace/ext/language_tools");

        // setup the defaults
        editor.setTheme("ace/theme/chrome");
        editor.getSession().setMode("ace/mode/javascript");

        // options
        editor.setOptions({
            showGutter: true,
            showPrintMargin: false,
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            fontSize: '14px',
            fontFamily: 'Consolas'
        });   
   }

   $scope.$watch("Editor.Scripting", function(n, o){
      $scope.Model.Scripting = n.split("\n");
   });
});

This seems to work fine, but I don't think it is right to have Scripting twice. Is there a simpler way to accomplish this that will not require $watch or will not require having to proxy it through a second variable on the $scope? I've tried binding to $scope.Model.Scripting directly, but that caused some strange behavior when it came to loading an object that already had scripting on it.

The HTML for this looks like ..

<div ui-ace="{ onLoad: aceLoaded }" data-ng-model="Editor.Scripting"></div>
{{ Model.Scripting }}

Solution

  • You do not describe why do you need this, but if you are not going to modify that array, and you always want the latest version, you could use internal lines array used by ace editor.session.doc.$lines, which would be faster as it won't need to create new array on every change.