Cannot hide a Monaco Editor
Question
I have a Monaco Editor in my page. Now, I need to hide/show it from time to time. But I realise that it does not work well (see the screenshot below) with ng-show , ng-hide or ng-if . Does anyone have a solution?
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>
Edit 1: I still see a thin line:
1 answers
solution1
0 ACCPTED 2018-01-06 10:03:40
In order to use AngularJS directives, you first have to declare the scope of your application by adding the ng-app attribute to a container element. For example:
<body ng-app>
<div ng-hide="true">
Will be hidden
</div>
</body>
Now you can use all of the built-in AngularJS directives inside the body tag.
Here is a working JSBin demo . See how the ng-hide=true hides the Monaco editor. Remove that directive or change it to ng-hide=false to see it shown again.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.