Open gkoberger opened 10 years ago
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.
@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?
@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.
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.
@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 }
}
})
The
onLoad
option works great if the parent element is acontroller,
however if it's adirective
it's never called:http://plnkr.co/edit/CvPSaccYVKZfoesJC7o4?
The problem is it just hasn't binded yet. I hacked around it using this:
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.)