Codemirror 代码仅在单击 Angular 后显示答案

【问题标题】：Codemirror code displays only after click in AngularCodemirror 代码仅在单击 Angular 后显示
【发布时间】：2015-07-23 18:02:14
【问题描述】：

我有一个模式需要使用 codemirror 显示一些代码，我正在使用 AngularJS 开发应用程序。 html 如下所示：

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

我遇到的问题是代码只有在我点击后才会显示在 div 中。我尝试使用如下事件刷新编辑器，但它不起作用：

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

感谢任何帮助。谢谢。

【问题讨论】：

我不知道 codemirror 但是否有可能在您的视图被实例化之前调用 onLoad？如果您的 codemirrorLoaded 回调中有断点，它会在第一次点击之前到达吗？
它在模态显示之前被调用。当我第一次点击时不会再次被调用。
也许尝试从您的 JS 代码中手动触发该事件？

标签： angularjs codemirror

【解决方案1】：

你需要弄清楚编辑器在什么时候变得可见（初始化时显然不可见），并在那个点调用它的refresh方法。

【讨论】：

【解决方案2】：

在您的选项中添加 onload 操作，并在几毫秒后刷新代码镜像。例如：

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

【讨论】：

如果将codemirror添加到隐藏的dom元素中，您可以使用插件自动刷新使codemirro在第一次可见时可见。 codemirror.net/doc/manual.html#addon_autorefresh

【解决方案3】：

ui-refresh-directive 上描述了一个名为 ui-refresh 的指令，因此以下代码有效。感谢 cmets！

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

【讨论】：

我也有同样的问题。除了添加ui-refresh 指令之外，您还做了什么？

【解决方案4】：

我用的是ui-refresh="true"，但是只有点击后才会显示。

<div ui-refesh="true" ui-codemirror-opts="jsonEditorOption" data-ng-model="user.UserJsonDataParse"></div>

【讨论】：

这行不通，因为true 永远不会改变，需要有一个范围变量在 DOM 部分变得可见时改变

【解决方案5】：

有一个名为 autorefresh 的显示插件 https://codemirror.net/addon/display/autorefresh.js 将其包含在您的脚本中并使用其中一种闲置选项。

选项 1 HTML

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

选项 1 TypeScript

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

选项 2 HTML

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

选项 3 HTML

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

选项 3 TypeScript

editorOptions{
              autoRefresh:true
        }

【讨论】：

【解决方案6】：

我使用了一个简单的函数来显示编辑器并从真到假

// 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;
}

【讨论】：