angular-ui / ui-ace

This directive allows you to add ACE editor elements.
http://angular-ui.github.io/ui-ace
MIT License
578 stars 172 forks source link

onLoad callback not being called #17

Closed ensignavenger closed 10 years ago

ensignavenger commented 10 years ago

I am following the Readme, and I can't get the onLoad callback to work. During troubleshoooting, it appears that

    if (angular.isFunction(opts.onLoad)) 

in ui-ace.js is evaluating false. No code placed in this block executes.

My controller is taken straight from the readme.

var myModule = angular.module('joes_ide', ['ui.ace']);

myModule.controller('MyController', [ '$scope', function($scope) {

  $scope.aceLoaded = function(_editor){
    // Editor part
    var _session = _editor.getSession();
    var _renderer = _editor.renderer;

    // Options
    _editor.setReadOnly(true);
    _session.setUndoManager(new ace.UndoManager());
    _renderer.setShowGutter(false);

    // Events
  //  _editor.on("changeSession", function(){ ... });
   // _session.on("change", function(){ ... });
  };

}]);

Likewise, my view-

<div ui-ace="{
  useWrapMode : true,
  showGutter: false,
  theme:'twilight',
  mode: 'xml',
  onLoad: aceLoaded,
  onChange: aceChanged
}"></div>
douglasduteil commented 10 years ago

Can you add a live example demonstrating your problem ('cause the demo is still working)

ensignavenger commented 10 years ago

I uploaded my test code here- http://demo1.ensignhost.com/index.html

douglasduteil commented 10 years ago

So this is it !

<!DOCTYPE html>
<html ng-app="joes_ide">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>JoeS IDE</title>
    <link rel="favicon.ico" href="favicon.ico">
    <script src="js/angular/angular.js"></script>
    <script src="js/angular-ui-ace/ui-ace.js"></script>
    <script src="js/app.js"></script>
    <script src="js/ace-builds/src-min-noconflict/ace.js"></script>
    <link rel="stylesheet" type="text/css" href="css/app.css">
  </head>
  <body>
<div ui-ace="{
  useWrapMode : true,
  showGutter: true,
  theme:'twilight',
  mode: 'xml',
  onLoad: aceLoaded,
  onChange: aceChanged
}"></div>

  </body>
</html>

I think that you just forgot to declare your controller MyController here like :

//...
<body ng-controller="MyController">
//...
ensignavenger commented 10 years ago

Well that did it! Thanks! Sorry for taking your time- I'm pretty new to this.