将代码镜像应用于ng
我正在编码一个非常非常基本的操场。 出于某种原因，我需要在AngularJS应用程序中嵌入HTML面板。
在这个版本中，我将一个JQuery更改监听器放到了CSS面板中，并将CodeMirror应用于textarea。 它的工作。
我对AngularJS应用程序内部有一个JQuery事件监听器感到不舒服，所以我决定将CSS面板绑定到AngularJS应用程序，并制作此版本。 但现在，问题是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：我发现这个线程，然后我做了一个codeMirror指令，它不工作。 DevTools向我显示一个错误TypeError: textarea.getAttribute is not a function CodeMirror.fromTextArea(...) TypeError: textarea.getAttribute is not a function 。
Here我在angularjs中添加了Demo For Code镜像。 我希望它能帮助你...
演示
响应解决OP的第二次尝试
在该指令的link功能，您使用的是elem PARAM作为纯HTML元素（这是由codemirror预期），但角度将它作为一个JQLite包裹元素-所以基本上你只需要从中获得HTML元素，并将其提供给codemirror，那么它将工作：
var editor = CodeMirror.fromTextArea(elm[0], cm_opt);
（注意elem[0]而不是elem ）
在AngularJS中，使用指令来封装基于JQuery的逻辑来制作依赖于代码镜像等其他技术的组件是不错的做法。 在某些情况下，您可能自己做这个，但也可以使用其他答案中提到的已建立的第三方库。
无论你做什么，都要确保通过使用指令和服务来很好地封装非角度逻辑。
希望这可以帮助。
您可以使用
UI.Codemirror指令
链接地址: http://www.djcxy.com/p/37795.html下一篇: javascript