无法隐藏摩纳哥编辑器

Question

I have a Monaco Editor in my page. 我的页面上有一个Monaco编辑器。 Now, I need to hide/show it from time to time. 现在，我需要不时隐藏/显示它。 But I realise that it does not work well (see the screenshot below) with ng-show , ng-hide or ng-if . 但是我意识到，使用ng-show ， ng-hide或ng-if不能很好地工作（请参见下面的屏幕截图）。 Does anyone have a solution? 有没有人有办法解决吗？

https://jsbin.com/mepupagisi/4/edit?html,output https://jsbin.com/mepupagisi/4/edit?html，输出

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
    <div ng-show="true">
        <div id="container"></div>
    </div>
    <script src="https://www.matrixlead.com/monaco-editor/min/vs/loader.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://www.matrixlead.com/monaco-editor/min/vs' }})

        require(["vs/editor/editor.main"], function () {
          var editor = monaco.editor.create(document.getElementById('container'), {
            value: 'function x() {\n\tconsole.log("Hello world!");\n}',
            language: 'javascript',
            minimap: { enabled: false },
            scrollBeyondLastLine: false
          });
        });
    </script>
</body>
</html>

Edit 1: I still see a thin line: 编辑1：我仍然看到一条细线：

Answer 1

In order to use AngularJS directives, you first have to declare the scope of your application by adding the ng-app attribute to a container element. 为了使用AngularJS指令，您首先必须通过将ng-app属性添加到容器元素来声明应用程序的范围。 For example: 例如：

<body ng-app>
  <div ng-hide="true">
    Will be hidden
  </div>
</body>

Now you can use all of the built-in AngularJS directives inside the body tag. 现在，您可以在body标签内使用所有内置的AngularJS指令。

Here is a working JSBin demo . 这是一个正在运行的JSBin演示。 See how the ng-hide=true hides the Monaco editor. 了解ng-hide=true如何隐藏摩纳哥编辑器。 Remove that directive or change it to ng-hide=false to see it shown again. 删除该指令或将其更改为ng-hide=false可以再次看到它。

无法隐藏摩纳哥编辑器

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-01-06 10:03:40

无法隐藏摩纳哥编辑器

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-01-06 10:03:40

解决方案1
0 已采纳 2018-01-06 10:03:40