Question

我有一个需要使用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() });
};

感谢任何帮助。感谢。

Answer 1

您需要弄清楚编辑器变为可见的时刻（初始化时显然不可见），并且点调用其refresh方法。

Answer 2

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

let app = XCUIApplication()
let newCell = app.staticTexts["Page 2 Item"]
XCTAssertFalse(newCell.exists)

app.collectionView.element.swipeUp()
XCTAssert(newCell.exists)

Answer 3

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

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

Answer 4

我使用ui-refresh =“true”，但它只在点击后显示。

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

Answer 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
        }

Answer 6

我使用了一个简单的函数来显示编辑器并从true更改为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;
}

只有在Angular中单击后才会显示Codemirror代码

6 个答案: