I am coding a very very basic playground. For some reason, I need to embed the html panel inside an AngularJS app.
In this version, I put a JQuery change listener to the CSS panel, and applied CodeMirror to the textarea. And it worked.
I felt uncomfortable about having a JQuery event listener inside an AngularJS app, so I decided to bind the CSS panel to the AngularJS app, and made this version. But now, the problem is the CodeMirror code (that I comment below) does not work anymore:
HTML:
<body>
<div ng-app="myApp" ng-controller="myCtrl">
HTML:<br>
<textarea rows=10 cols=40 ng-model="area1">html body area</textarea>
<br>CSS:<br>
<textarea id="css" rows=10 cols=40 ng-model="css"></textarea>
</div>
Output:
<section id="output">
<iframe></iframe>
</section>
</body>
JavaScript:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.area1 = "<body>default</body>";
$scope.$watch('area1', function (json) {
render();
}, true);
$scope.css="body {color: red}";
$scope.$watch('css', function (json) {
// CodeMirror does not work anymore
// var cm_opt = { mode: 'css', gutter: true, lineNumbers: false };
// var css_box = document.getElementById("css");
// var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
render();
}, true);
function render () {
var source = "<html><head><style>" + $scope.css + "</style></head>" +
$scope.area1 +"</html>";
var iframe = document.querySelector('#output iframe'),
iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
}
});
Does anyone know how to make CodeMirror work here?
Additionally, is it really a bad idea to use JQuery event listeners inside an AngularJS app? What's the best structure to code this playground that uses AngularJS + CodeMirror?
Edit 1: I found this thread, then I made a codeMirror directive, it does not work well. DevTools shows me an error TypeError: textarea.getAttribute is not a function at CodeMirror.fromTextArea(...).
HereI added Demo For Code mirror in angularjs. I hope it will help you...Here Demo