无法隐藏摩纳哥编辑器答案

【问题标题】：Cannot hide a Monaco Editor无法隐藏摩纳哥编辑器
【发布时间】：2018-01-06 19:00:18
【问题描述】：

我的页面中有一个摩纳哥编辑器。现在，我需要不时隐藏/显示它。但我意识到它不适用于ng-show、ng-hide 或ng-if。有人有解决办法吗？

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

<!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>

编辑 1： 我仍然看到一条细线：

【问题讨论】：

“效果不好”是什么意思？
@TsvetanGanev 你没看到它没有完全隐藏吗？
没有“不完全隐藏”这回事。 ng-show 和 ng-hide 只需切换 display: none CSS 属性，而 ng-if 会完全从 DOM 中删除元素。
请看我的编辑。

标签： javascript css angularjs monaco-editor

【解决方案1】：

为了使用 AngularJS 指令，您首先必须通过将 ng-app 属性添加到容器元素来声明应用程序的范围。例如：

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

现在您可以在 body 标记中使用所有内置的 AngularJS 指令。

这是一个有效的JSBin demo。查看 ng-hide=true 如何隐藏 Monaco 编辑器。删除该指令或将其更改为 ng-hide=false 以再次看到它。

【讨论】：

我添加了一个 JSBin 演示。
我明白了...在我的真实代码中，我使用flexbox 这可能会导致麻烦，我将展示一个完整的非工作示例...
这与AngularJS和原来的问题无关。