How to get the value from ACE-Angular editor

Question

I am having problems on getting Ace code editor results from whatever I type on the code editor.

As you can see I set up my controller with all the functionalities and options. The only thing that is not working is rendering the results from editor. Thank you in advance....

app.controller('AceCtrl', function ($scope) {

      $scope.modes = ['CoffeeScript'];
      $scope.mode = $scope.modes[0];

      $scope.aceOption = {
        mode: $scope.mode.toLowerCase(),
        onLoad: function (editor) { 
          // defaults 
          editor.setTheme("ace/theme/monokai");
           // options
           editor.setOptions({
            showGutter: true,
            showPrintMargin: false,
           });

          $scope.modeChanged = function () {
            editor.getSession().setMode("ace/mode/" + $scope.mode.toLowerCase());
          };

        }
      };

      //Runs every time the value of the editor is changed
        $scope.aceChanged = function(_editor){
          console.log('Ace editor changed');
          // Get Current Value
          var currentValue = _editor.getSession().getValue();
          // Set value
          _editor.getSession().setValue('This text is now in the editor');
        };
});


<div class="wrapper" ng-controller="AceCtrl">
  <section >
    <select ng-model="mode" ng-options="m for m in modes" ng-change="modeChanged()" autofocus="0"></select> 
    <div ui-ace="aceOption" ng-model="aceModel" class="ace_editor"></div>
  </section>
   <div ng-change="aceChanged" style="border:1px solid red; position:relative; width:50%; height:300px; float:right;"></div>
</div>

Answer 1

If you want to do this in the onChange handler of ui-ace you could get the document from the editor's session and grab it's value:

editor.getSession().getDocument().getValue();

Reference: http://ajaxorg.github.io/ace/#nav=api&api=document

Example code:

<div ui-ace="{
    onLoad: aceLoaded,
    onChange: aceChanged
}"></div>
<textarea id="ace_document">
    {{aceDocumentValue}}
</textarea>

$scope.aceLoaded = function(_editor) {
    $scope.aceSession = _editor.getSession();
};
$scope.aceChanged = function () {
    $scope.aceDocumentValue = $scope.aceSession.getDocument().getValue();
};

Working example on Plunker: http://plnkr.co/edit/9swlVY9JnIfOnbOAfXui?p=preview

But the easiest way is to assign the value to scope and use ng-model on the directive's element:

Controller:

angular.module('app').controller('rootController', [
    '$scope',
    function ($scope) {
        $scope.aceValue = 'Foobar';
    }
]);

Template:

<div ui-ace ng-model="aceValue"></div>
<textarea id="ace_document" ng-model="aceValue"></textarea>

Working example on Plunker: http://plnkr.co/edit/fbtzYDEqIQEwB6Ascm3s?p=preview