我的页面中有一个 Monaco 编辑器。现在，我需要不时隐藏/显示它。但我意识到它不能很好地与 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:我仍然看到一条细线:
最佳答案
为了使用 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 以再次显示它。
关于javascript - 无法隐藏 Monaco Editor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48126131/