我正在编写一个非常基本的游乐场。出于某种原因,我需要将html面板嵌入到AngularJS应用程序中。
在this version中,我将一个JQuery更改侦听器放到CSS面板中,并将CodeMirror应用于textarea。它起作用了。
我对在AngularJS应用程序中使用JQuery事件监听器感到不舒服,所以我决定将CSS面板绑定到AngularJS应用程序,并制作this version。但现在,问题是CodeMirror代码(我在下面评论)不再起作用了:
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();
}
});
有谁知道如何让CodeMirror在这里工作?
此外,在AngularJS应用程序中使用JQuery事件侦听器真的是个坏主意吗?编写使用AngularJS + CodeMirror的游乐场的最佳结构是什么?
编辑1:我找到this thread,然后我制作了codeMirror directive,但效果不佳。 DevTools在TypeError: textarea.getAttribute is not a function
向我显示错误CodeMirror.fromTextArea(...)
。
答案 0 :(得分:2)
Here
我在angularjs中添加了Demo For Code mirror。我希望它能帮到你......
答案 1 :(得分:1)
解决OP的第二次尝试的响应
在指令的link
函数中,您使用elem
param作为纯HTML元素(由codemirror预期),但angular将其作为JQLite包装元素提供 - 所以基本上你只需要要从中获取HTML元素并将 it 提供给codemirror,那么它将起作用:
var editor = CodeMirror.fromTextArea(elm[0], cm_opt);
(注意elem[0]
而不是elem
)
在AngularJS中,使用指令来包装基于JQuery的逻辑来制作依赖于代码镜像等其他技术的组件并不是一种坏习惯。在某些情况下,您可以自己执行此操作,但也可以使用其他答案中提到的已构建的第三方库。
无论你做什么,都要确保通过使用指令和服务来很好地封装非角度逻辑。
希望这有帮助。
答案 2 :(得分:0)
您可以使用