代码之家 › 专栏 › 技术社区 › SoftTimur

无法隐藏Monaco编辑器

monaco-editor angularjs css javascript

SoftTimur · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

Tsvetan Ganev 7 年前

为了使用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 再次显示。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

Mass · 如何在Tailwind CSS v4中创建配置

3 月前

magenta placenta · 将css变量合并为一个变量

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前