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 }}
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.