angular-ui
ng-model of ace editor is not changing when I'm dynamically changing few lines of editor.
Firstly I'm loading content of editor by initialising ng-model of editor. Then in controller I'm changing few lines, but when I'm printing ng-model value it is showing the previous one.
If you are looking for 2 way binding then this is how it works.
In Html:
<div ui-ace="{
useWrapMode : true,
showGutter: true,
mode: 'json',
firstLineNumber: 5,
onLoad : aceLoaded,
onChange: aceChanged
}" ng-model="json.jsonStrifyJsonData"></div>
in controller:
$scope.json = {
jsonStrifyJsonData: JSON.stringify(YOUR_JSON_OBJECT, null, 4)
}
You need to set the model as a JSON object so that the scopes issues do not arise.
So with this approach, ace should update the model value whenever the value of editor changes. right?
In my case, instead of a human interaction with the editor, I have a button which when clicked inserts a text in the editor but same is not reflected in the model.
Here's the Fiddle for the same - https://jsfiddle.net/ashitvora/q27ebeeq/38/
when I insert the text, I do it in Editor but not in Model Value.
When I explicitly set the value to model, the cursor moves the very first position instead of staying there.
If your goal is to update Editor with some buttons you can easily do that with updating the model on the click handler of your button and it would work. Updated fiddle: https://jsfiddle.net/q27ebeeq/41/
and for the cursor moment: that happens because the cursor position is zero when there is no user interaction with the editor. You would need to calculate the desired cursor position and set the cursor position to that point.
I did try calculating the cursor position manually and setting it but it doesn't work. Here's the code for the same...
var param = Math.random();
// Get current cursor position to insert text
var cursorPosition = scope.aceUrlEditor.getCursorPosition();
// Inser text
scope.aceUrlEditor.session.insert(cursorPosition, param);
// Assign Ace Content to Model as it doesn't do it automatically.
scope.operator.dynurl.value = scope.aceUrlEditor.getValue();
// Set cursor right after the newly added text
scope.aceUrlEditor.renderer.scrollCursorIntoView({
row: cursorPosition.row,
column: cursorPosition.column + param.length
}, 0.5);
If your goal is to update Editor with some buttons you can easily do that with updating the model on the click handler of your button and it would work.
In that case you'll loose the undo/redo history
