0

I have a modal that needs to display some code using codemirror and I am developing the app in AngularJS. The html looks like the following:

<div class="modal-body">
    <div ui-codemirror="{onLoad:codemirrorLoaded}" ui-codemirror-opts="viewEventEditorOptions" data-ng-model="event.text"></div>
</div>

The problem I am having is that the code displays in the div only after I click inside it. I have tried refreshing the editor using an event like the following but it is not working:

$scope.codemirrorLoaded = function(_editor){
    // Events
    _editor.on("beforeChange", function(){ _editor.refresh() });
    _editor.on("change", function(){ _editor.refresh() });
};

Any help is appreciated. Thanks.

3
  • I don't know about codemirror but is it possible onLoad is called before your view is instanciated? If you have a break-point in your codemirrorLoaded callback, does it reach it before first click?
    – zeachco
    Commented Jul 23, 2015 at 18:28
  • It's getting called before the modal is displayed. Doesn't get called again when I do the first click.
    – OVB
    Commented Jul 23, 2015 at 18:33
  • maybe try to trigger that event manually, from your JS code?
    – user680786
    Commented Jul 25, 2015 at 20:37

6 Answers 6

1

You need to figure out the moment at which the editor becomes visible (it is apparently not visible when initialized), and at that point call its refresh method.

1

Add onload action to your options and refresh the codemirror after some milliseconds. Ex :

modalScope.editorOptions = {
    lineWrapping : true,
    lineNumbers: true,
    readOnly: 'nocursor',
    mode: 'yaml',
    onLoad: function(_editor){
        modalScope.editor = _editor;

        // Load without click
        setTimeout(function(){
            modalScope.editor.refresh();
        }, 100);
    }
  };
1
0

There was a directive called ui-refresh described on ui-refresh-directive so the following code worked. Thanks for the comments!

<div ui-codemirror="{onLoad:codemirrorLoaded}" ui-refresh="true" ui-codemirror-opts="viewEventEditorOptions" data-ng-model="event.text"></div>
1
  • 1
    I have the same problem. Did you do anything else but adding the ui-refresh directive?
    – Matthias
    Commented Nov 13, 2015 at 14:36
0

I use ui-refresh="true", but it only show after click to it.

<div ui-refesh="true" ui-codemirror-opts="jsonEditorOption" data-ng-model="user.UserJsonDataParse"></div>
1
  • that doesn't work because true never changes, there needs to be a scope variable that changes when that DOM part becomes visible
    – svarog
    Commented Aug 9, 2017 at 12:53
0

There is an display addon called autorefresh https://codemirror.net/addon/display/autorefresh.js include it in your scripts and use one of the fallowing options.

Option 1 HTML

<div ui-codemirror="{onLoad:codemirrorLoaded}"</div>

Option 1 TypeScript

codemirrorLoaded(_editor) {
        // Editor part
        var _doc = _editor.getDoc();
        _editor.focus();
        // Options
        _editor.setOption('autoRefresh', true);
        }

Option 2 HTML

<div ui-codemirror="{autoRefresh:true}">

Option 3 HTML

<div ui-codemirror ui-codemirror-opts="editorOptions">

Option 3 TypeScript

editorOptions{
              autoRefresh:true
        }
0

I've used a simple function to show the editor and change from true to false

// HTML

<div ng-show="editorEnabled">
    <ui-codemirror ui-refresh="editorEnabled" ng-model="function"></ui-codemirror>
</div

// JS

$scope.editorEnabled= false;

$scope.enableEditor= function() {
    $scope.editorEnabled= true;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.