在1个控制器中使用2个ui-codemirrors

Question

I am coding a very very basic playground by using AngularJS and ui-codemirror . 我正在使用AngularJS和ui-codemirror编写一个非常基本的游乐场。 Here is the code ( JSBin ). 这是代码（ 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: 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 . 上面的代码可以工作，但问题是它将同一个ui.config应用于2 ui-codemirror 。 Does anyone know how to apply mode html to the first ui-codemirror and mode css to the second ui-codemirror ? 有谁知道如何将模式html应用到第一个ui-codemirror和模式css到第二个ui-codemirror ？

Additionally, how could I set the height (or rows ) and width (or cols ) of a ui-codemirror ? 另外，我如何设置ui-codemirror的高度（或rows ）和宽度（或cols ）？

Answer 1

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 : 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>

Answer 2

Since you're dealing with two separate text areas that have rather different roles (or imagine if they were more), it makes sense to define separate directives for them, each one accepting a different config object. 由于您正在处理具有相当不同角色的两个单独文本区域（或者想象它们是否更多），因此为它们定义单独的指令是有意义的，每个指令都接受不同的配置对象。 I've created a JSBin which shows one possible approach, via directive factory that can be used to generated different "mirrors". 我已经创建了一个JSBin ，它通过可以用来生成不同“镜像”的指令工厂显示一种可能的方法。

angular.module('codeMirrorApp')
  .factory('CodeMirrorFactory', ['$parse',
    function($parse) {
      return {
        createDirective: function(config) {
          var configString = JSON.stringify(config);
          return {
            scope: true,
            restrict: 'E',
            template: '<textarea ui-codemirror=' + configString + ' ng-model="content"></textarea>',
            controller: ['$scope', '$attrs', function($scope, $attrs) {
              var handler = $parse($attrs.handler);

              $scope.$watch('content', function(value) {
                handler($scope, { content: value });
              });
            }]
          };
        }
      };
    }
  ]);

I'm intentionally using handlers provided by the parent controller instead of bindings to the parent scope as this makes things look more understandable even while looking at the HTML markup. 我故意使用父控制器提供的处理程序而不是绑定到父作用域，因为这使得即使在查看HTML标记时看起来也更容易理解。

The controller: 控制器：

angular.module('codeMirrorApp')
  .controller('MirrorsController', ['RenderMirrors',
    function(RenderMirrors) {
      var ctrl = this,
          html,
          css;

      ctrl.handleHtml = function(htmlString) {
        html = htmlString;
        RenderMirrors.render(html, css);
      };

      ctrl.handleCss = function(cssString) {
        css = cssString;
        RenderMirrors.render(html, css);
      };
    }
  ]);

Markup: 标记：

<div ng-app="codeMirrorApp">
  <div ng-controller="MirrorsController as ctrl">
    HTML:<br>
    <html-code-mirror handler="ctrl.handleHtml(content)"></html-code-mirror>
    <br>CSS:<br>
    <css-code-mirror handler="ctrl.handleCss(content)"></css-code-mirror>
  </div>
  Output:
  <section id="output">
    <iframe></iframe>
  </section>
</div>

Hope this helps. 希望这可以帮助。

在1个控制器中使用2个ui-codemirrors

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-01-10 14:26:36

解决方案2
2 2017-01-10 16:59:26

在1个控制器中使用2个ui-codemirrors

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-01-10 14:26:36

解决方案2 2 2017-01-10 16:59:26

解决方案1
2 已采纳 2017-01-10 14:26:36

解决方案2
2 2017-01-10 16:59:26