onLoad and directives

[gkoberger]

The onLoad option works great if the parent element is a controller, however if it's a directive it's never called:

http://plnkr.co/edit/CvPSaccYVKZfoesJC7o4?

The problem is it just hasn't binded yet. I hacked around it using this:

    setTimeout(function() {
        opts = angular.extend({}, options, scope.$eval(attrs.uiAce));
        if (angular.isFunction(opts.onLoad)) {
            opts.onLoad(acee);
        }
    }, 0);

However this clearly is slightly hacky (not to mention I had to edit ui-ace, which I'd rather not do). A $watch would probably work as well (and be more appropriate here).

(Thanks for this directive, by the way -- it's been an awesome help.)

[m-e-conroy]

I have the same issue with both onLoad and onChange, when Ace is loaded via a directive's template the functions attached to these options/events never get called.

I'm also having a problem with the ngModel attached to the Ace instance being updated by Ace when changes occur in the editor. Although if I manually update the model from a function in the controller Ace itself updates with the changes just fine; Ace just doesn't seem to update the model.

[JoshRosen]

@m-e-conroy I'm running into a similar issue, where updates in the Ace editor don't seem to update the associated ng-model. Did you ever find a solution to this problem?

[dknell]

@JoshRosen , @m-e-conroy If your Ace editor is inside a ngSwitch or another directive that creates it's own scope, you need handle it accordingly. See this for an example of how it should be done.

[noobthinker]

the html code: div ui-ace="{ onLoad : aceLoaded,onChange:aceChanged }" ng-model="aceVal"
change the ui-ace.js 126 line eval code to this: var opts = angular.extend({}, options, scope.$eval(attrs.uiAce,scope));

the scope is the root html scope like this : html ng-app="app" ng-controller="AceController"

in the AceController add

         $scope.aceChanged=function(){
            var lastInsert=evt[0].data.text;
                     var vals = evt[1].getValue();
            console.log(lastInsert+"<||>"+vals);
        }

        $scope.aceLoaded=function(){
            console.log('load');
        }

ui.ace event handler worked.

[kruny1001]

@JoshRosen , @m-e-conroy I just want to let you know how you can load onLoad and onChange function from a directive.

.directive('aceEditor', function (){
return {
      templateUrl: 'views/templates/superEditor/r-code-exe.html',
      scope: {target: '@', mode:'@', cnt:'='},
      restrict: 'E',
      link: {
        pre: function preLink(scope, element, attrs){  // put ace option definition here },
        post: function postLink(scope, element, attrs){ // your logic for directive }
  }
})