Skip to content
This repository has been archived by the owner on Sep 8, 2020. It is now read-only.

ng-model of ace editor is not changing when I'm dynamically changing few lines of editor. #178

Open
prashant-pokhriyal opened this issue Aug 30, 2017 · 6 comments

Comments

@prashant-pokhriyal
Copy link

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.

@mirwaqaskhan
Copy link

Hey @prashant-pokhriyal did you find a solution to this issue?

@mirwaqaskhan
Copy link

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.

@ashitvora-zz
Copy link

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.

@mirwaqaskhan
Copy link

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.

@ashitvora-zz
Copy link

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);

@smellai
Copy link

smellai commented Dec 13, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants