Comments (12)
+1
from ui-ace.
Seems to work for me fine. You need to tap into the onLoad
callback, like so,
<div ui-ace="{ onLoad : vm.aceLoaded, mode: vm.script.type }"></div>
this.aceLoaded = (editor) => {
editor.insert(script.body)
}
from ui-ace.
Here is a plunker that reproduces the issue
http://plnkr.co/edit/wZ2uuUGhYfEltWsQGN6R?p=preview
Notice that when you type into the editor, the model is updated and is reflected in the pre tag.
However, when you click the button, the editor is updated but the model is not. The model will not be updated again until you type into the editor.
var app = angular.module('x', ['ui.ace']);
app.controller('FooCtrl', function () {
var editor;
this.message = "";
this.onAceLoaded = function (acee) {
editor = acee;
};
this.doInsert = function () {
if (!editor) return;
editor.insert('Hello');
};
})
<section ng-controller="FooCtrl as foo">
<div ui-ace="{ onLoad: foo.onAceLoaded }" ng-model="foo.message"></div>
<button ng-click="foo.doInsert()">Click Me</button>
<hr>
<pre>{{ foo.message }}</pre>
<hr>
</section>
from ui-ace.
I've created a workaround here: http://plnkr.co/edit/7Mo7BE3vEIdOvh41Jqfe?p=preview
app.directive('fixAceInsert', function ($parse) {
return {
restrict: 'A',
require: ['ngModel', 'fixAceInsert'],
link: function (scope, el, attrs, ctrls) {
var ngModel = ctrls[0];
var fixAceInsert = ctrls[1];
fixAceInsert.cb = $parse(attrs.fixAceInsert)(scope);
fixAceInsert.ngModel = ngModel;
if (fixAceInsert.cb && fixAceInsert.editor) {
fixAceInsert.cb(fixAceInsert.editor);
}
},
controllerAs: 'uiAceInsertFix',
controller: function () {
var self = this;
this.onAceLoaded = function (editor) {
self.editor = editor;
if (self.cb) {
cb(editor);
}
editor.on('change', function (event) {
if (!self.ngModel) {
return;
}
if (event.data.action !== 'insertText') {
return;
}
self.ngModel.$setViewValue(editor.getValue());
});
};
}
};
});
<section ng-controller="FooCtrl as foo">
<div ui-ace="{ onLoad: uiAceInsertFix.onAceLoaded }"
ng-model="foo.message"
fix-ace-insert="foo.onAceLoaded"></div>
<button ng-click="foo.doInsert()">Click Me</button>
<hr>
<pre>{{ foo.message }}</pre>
<hr>
</section>
from ui-ace.
I'm having this issue as well.
from ui-ace.
+1 We also have this issue. Please fix this.
from ui-ace.
I've submitted a patch for this in #124
from ui-ace.
Also had the issue (created and now closed a duplicate item). Also same as #133, but he seems to have a (unpushed) solution.
from ui-ace.
+1
Any update on this issue? It's 18 months old :(
from ui-ace.
+1 Any update on this?
from ui-ace.
I have used following code for me,
$scope.aceOptions = {};
//Ace Editor instance on change
$scope.aceOptions.onChange = function(_editor){
//on change get current value
$scope.content = $scope.aceEditor._session.getValue();
};
//Ace Editor instance as first argument
$scope.aceOptions.onLoad = function(_editor){
$scope.aceEditor._editor = _editor;
$scope.aceEditor._session = _editor.getSession();
};
//on event click used the following lines
if($scope.aceEditor && $scope.aceEditor._editor){
//Inserts text into wherever the cursor is pointing.
$scope.aceEditor._editor.insert(imageTag);
}
And view side
<div ui-ace="aceOptions" ng-model="content"></div>
Hope this will help you !
from ui-ace.
My quick and dirty way of doing it
In controller:
editor.insert("text to insert");
angular.element(editor.container).controller('ngModel').$setViewValue(editor.getValue());
from ui-ace.
Related Issues (20)
- Ace not working with Bootstrap Modal HOT 3
- ui-ace lucene mode dropping module because define wasn't a string.
- ui-ace need ace to work... (o rly?) HOT 2
- Missing onFocus callback when the editor is focused HOT 2
- Adding dynamic content HOT 1
- setTheme api
- Cannot support utf8 write
- ng-model deleted when pasting the same content to the editor HOT 1
- Initializing ace editor content using $http service HOT 3
- ng-model of ace editor is not changing when I'm dynamically changing few lines of editor. HOT 6
- how to implement a new completer in ui ace? HOT 1
- how to set font-size
- mode not highlighting syntax HOT 1
- Inserting text in Ace Editor via Protractor throws error HOT 2
- highlight the lines when select or selectAll?
- How to set cursor position after inserting text
- How to get ace status bar HOT 1
- Use without bower? HOT 4
- How to remove Toolbar(blue panel) from ace editor
- Browser hangs for "yaml" validation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui-ace.