无法隐藏摩纳哥编辑

时间:2018-01-06 09:47:33

标签: javascript css angularjs monaco-editor

我的页面中有一个摩纳哥编辑器。现在,我需要不时隐藏/显示它。但我意识到它使用ng-showng-hideng-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:我仍然看到一条细线:

enter image description here

1 个答案:

答案 0 :(得分:0)

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

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

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

这是一个有效的JSBin demo。了解ng-hide=true如何隐藏摩纳哥编辑。删除该指令或将其更改为ng-hide=false以再次显示该指令。