代码之家 › 专栏 › 技术社区 › 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 再次显示。

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前