在 1 个控制器中使用 2 个 ui-codemirrors [英] Use 2 ui-codemirrors in 1 controller
本文介绍了在 1 个控制器中使用 2 个 ui-codemirrors的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 AngularJS 和 ui-codemirror 编写一个非常非常基本的游乐场.这是代码(JSBin).
<头><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css"><link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script><script src="https://codemirror.net/lib/codemirror.js"></script><script src="https://codemirror.net/addon/edit/matchbrackets.js"></script><script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script><script src="https://codemirror.net/mode/xml/xml.js"></script><script src="https://codemirror.net/mode/javascript/javascript.js"></script><script src="https://codemirror.net/mode/css/css.js"></script><script src="https://codemirror.net/mode/clike/clike.js"></script><script src="https://codemirror.net/mode/php/php.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script><身体><div ng-app="myApp"><div ng-controller="codeCtrl">HTML:
<textarea ui-codemirror ng-model="html"></textarea><br>CSS:<br><textarea ui-codemirror ng-model="css"></textarea>输出:<section id="输出"><iframe></iframe></节>
</html>
JavaScript:
var myApp = angular.module('myApp', ['ui']);myApp.value('ui.config', {代码镜像:{模式:'text/x-php',行号:真，匹配括号:真实，}});功能代码Ctrl($范围，代码服务){$scope.html = 'default';$scope.css = "body {color: red}";$scope.$watch('html', function () { codeService.render($scope.html, $scope.css); }, true);$scope.$watch('css', function () { codeService.render($scope.html, $scope.css); }, true);}myApp.service('codeService', function () {this.render = 函数(html，css){source = "<html><head><style>"+ css + "</style></head>"+ html +"</html>";var iframe = document.querySelector('#output iframe'),iframe_doc = iframe.contentDocument;iframe_doc.open();iframe_doc.write(source);iframe_doc.close();}})上述代码有效，但问题是它将一个相同的 ui.config 应用到 2 个 ui-codemirror.有谁知道如何将模式 html 应用到第一个 ui-codemirror 和模式 css 到第二个 ui-codemirror>?
另外，如何设置 ui-codemirror 的高度(或 rows)和宽度(或 cols)?
解决方案
Controller:
function codeCtrl($scope, codeService) {$scope.editorOptions1 = {mode: 'text/html',行号:假，匹配括号:真}；$scope.editorOptions2 = {mode: 'text/css',行号:真，匹配括号:真}；$scope.html = 'default';$scope.css = "body {color: red}";$scope.$watch('html', function () { codeService.render($scope.html, $scope.css); }, true);$scope.$watch('css', function () { codeService.render($scope.html, $scope.css); }, true);}HTML :
HTML:
<textarea ui-codemirror="editorOptions1" ng-model="html"></textarea><br>CSS:<br><textarea ui-codemirror="editorOptions2" ng-model="css"></textarea>I am coding a very very basic playground by using AngularJS and ui-codemirror. Here is the code (JSBin).
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.css">
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://codemirror.net/mode/css/css.js"></script>
<script src="https://codemirror.net/mode/clike/clike.js"></script>
<script src="https://codemirror.net/mode/php/php.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="codeCtrl">
HTML:<br>
<textarea ui-codemirror ng-model="html"></textarea>
<br>CSS:<br>
<textarea ui-codemirror ng-model="css"></textarea>
</div>
Output:
<section id="output">
<iframe></iframe>
</section>
</div>
</body>
</html>
JavaScript:
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true,
}
});
function codeCtrl($scope, codeService) {
$scope.html = '<body>default</body>';
$scope.css = "body {color: red}";
$scope.$watch('html', function () { codeService.render($scope.html, $scope.css); }, true);
$scope.$watch('css', function () { codeService.render($scope.html, $scope.css); }, true);
}
myApp.service('codeService', function () {
this.render = function (html, css) {
source = "<html><head><style>" + css + "</style></head>" + html +"</html>";
var iframe = document.querySelector('#output iframe'),
iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
}
})
The above code works, but the problem is it applies one same ui.config to 2 ui-codemirror. Does anyone know how to apply mode html to the first ui-codemirror and mode css to the second ui-codemirror?
Additionally, how could I set the height (or rows) and width (or cols) of a ui-codemirror?
解决方案
Controller:
function codeCtrl($scope, codeService) {
$scope.editorOptions1 = {mode: 'text/html',
lineNumbers: false,
matchBrackets: true};
$scope.editorOptions2 = {mode: 'text/css',
lineNumbers: true,
matchBrackets: true};
$scope.html = '<body>default</body>';
$scope.css = "body {color: red}";
$scope.$watch('html', function () { codeService.render($scope.html, $scope.css); }, true);
$scope.$watch('css', function () { codeService.render($scope.html, $scope.css); }, true);
}
Html :
<div ng-controller="codeCtrl">
HTML:<br>
<textarea ui-codemirror="editorOptions1" ng-model="html"></textarea>
<br>CSS:<br>
<textarea ui-codemirror="editorOptions2" ng-model="css"></textarea>
</div>
这篇关于在 1 个控制器中使用 2 个 ui-codemirrors的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
