How do you initialize the editor when directives get compiled after the controller?

[choxi]

I haven't been able to get the example editor initialization to work because it looks like the directive is compiled after the controller is initialized. Here's an example:

In the html:

<div ng-controller="MyController">
  <div ui-ace scope-instance="foo"></div>
</div>

In the controller:

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

  // this is undefined because
  // the controller is initialized 
  // before the directive is compiled
  var _editor = $scope.foo; 
}]);

[rsertelon]

Same here! :)

[douglasduteil]

Try to watch it !

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

  var _editor; 
  $scope.$watch('foo',function(foo_instance){
    _editor = foo_instance;
  });

}]);

[choxi]

Thanks for the tip! I don't think that would work in my case because the callback would trigger every time the instance is changed, and in my case I just want to initialize the editor once. I added up adding this to ui-ace.js:

        // EVENTS
        session.on('change', onChange(opts.onChange));

        // Direct instance access
        if (attrs.scopeInstance && "" !== attrs.scopeInstance) {
          scope[attrs.scopeInstance] = acee;
        }

// I added this so you can hook in a
        // callback after the editor is initialized
        if (attrs.onLoad && "" !== attrs.onLoad) {
          scope[attrs.onLoad]()
        }

If that's an acceptable solution I could submit a pull request.

On Monday, July 22, 2013 at 2:36 AM, Douglas Duteil wrote:

Try to watch it ! myAppModule.controller('MyController', [ '$scope', function($scope) { var _editor; $scope.$watch('foo',function(foo_instance){ _editor = foo_instance; }); }]);

— Reply to this email directly or view it on GitHub (https://github.com/angular-ui/ui-ace/issues/5#issuecomment-21333730).

[plasticparticle]

I have the same issue.

[douglasduteil]

If that's an acceptable solution I could submit a pull request.

@choxi Sure go ahead. It's maybe easier to just add it as an event in the ace options.

<div ui-ace="{ onLoad : aceLoaded }" ></div>

[...]
// Direct instance access
if (angular.isFunction(opts.onLoad)) { opts.onLoad(acee); }
[...]