个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在编写一个非常非常基本的 Playground 。由于某种原因，我需要将 html 面板嵌入到 AngularJS 应用程序中。
在 this version ，我将 JQuery 更改监听器放置到 CSS 面板，并将 CodeMirror 应用于文本区域。结果成功了。
我对 AngularJS 应用程序内有 JQuery 事件监听器感到不舒服，所以我决定将 CSS 面板绑定(bind)到 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 编写这个 Playground 的最佳结构是什么？
编辑1:我发现this thread ，然后我做了一个codeMirror directive ， 它不好用。 DevTools 在 CodeMirror.fromTextArea(...) 处向我显示错误 TypeError: textarea.getAttribute is not a function。
最佳答案
这里我在angularjs中添加了Demo For Code镜像。希望对您有所帮助...
关于jquery - 将 CodeMirror 应用于 ng-model-bound 文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41345286/
24
4
0
在许多在线资源中，可以找到“内存”、“带宽”、“延迟”绑定(bind)内核的不同用法。在我看来，作者有时会使用他们自己对这些术语的定义，我认为这对某人做出明确区分非常有益。 据我了解:带宽绑定(bin
FIFO、LIFO 和LC Branch and Bound 有什么区别？ 最佳答案 Branch & Bound 通过使用估计边界来限制可能解决方案的数量来发现完整搜索空间内的分支。不同的类型(FI
我有一个网页，其中有一些 Kendo 控件(例如下拉菜单和按钮)可以正常工作，但是添加Grid 会导致问题。 @(Html.Kendo().Grid(Model).Name("grid").Colu
术语“CPU 限制”和“I/O 限制”是什么意思？ 最佳答案 这非常直观: 如果 CPU 更快，程序就会运行得更快，即程序的大部分时间只是使用 CPU(进行计算)，则该程序是 CPU 密集型。 计算
我在以下代码段中遇到问题并发出警告，希望您能帮助我: fprintf (fp, "%dd%d+%d ", pMobIndex->mana[DICE_NUMBER], DICE_NUMBER 在我
swift 2 let gap = CGFloat(randomInRange(StackGapMinWidth...maxGap)) Missing argument label 'range:'
swift 2 let gap = CGFloat(randomInRange(StackGapMinWidth...maxGap)) Missing argument label 'range:'
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 关闭 6 年前。 这个问题是由于打字错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在
我想在gcc8.2下启用数组边界检查，这样可以帮助在编译期间检查数组下标是否越界，它可能会给出如下警告:数组下标高于数组边界 [-Warray-bounds] 我使用 coliru 做了一个演示: #
我只是想知道在 Apple API 中的什么地方定义了变量“bounds.minX”、“bounds.maxX”？我查看了“UIView”和“CGRect”文档，但似乎找不到它？ 最佳答案 它包含在"
我想覆盖整个屏幕。我想将其框架设置为覆盖整个屏幕。浏览堆栈溢出时，我发现了这两种不同的设置 View 框架以覆盖屏幕的方法: [UIScreen mainScreen].bounds [UIApplc
在协程中执行 IO 绑定(bind)函数(例如，从后端请求数据)给了我一个优势，即在请求结果可用之前暂停它的执行，对吗？但是，受 CPU 限制的函数(例如，解析一个巨大的文本文件)不会“等待”任何东西
public class ChampionsLeague> extends League{ ... 如何创建此类的实例？ ChampionsLeague league = new ChampionsL
我遇到了以下问题: 我有这些类和接口(interface)定义 public abstract class ViewModelRefreshPostListFragment> extends
我注意到在使用 (Swift 4.0) 的 IOS X 代码中，我至少可以通过以下两种方式请求 View 的高度 V: V.bounds.size.height 和... V.bounds.heigh
swift 中 bounds.size.width 和 bounds.width 有什么区别？他们会返回同样的东西吗？谢谢! 最佳答案 bounds 是 UIView 的 CGRect 结构属性，其中
在我看来不可能包含 Integer.MAX_VALUE和Long.MAX_VALUE创建 IntStream 时尽可能使用随机值或LongStream使用 java.util.Random 的边界类。
我有二叉树类: public class BinaryTree> extends AbstractTree { protected TreeNode root;
我最近做了并更新了我的 Xamarin iOS 项目，我曾经能够调用以下代码来检索屏幕宽度和高度: if (orientation == UIInterfaceOrientation.Landscap
我仍然不明白为什么我收到这个警告 array subscript is above array bounds [-Warray-bounds] 对于一个小的 C 代码如下: #include #in
我是一名优秀的程序员,十分优秀！