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

【问题标题】：Use 2 ui-codemirrors in 1 controller在 1 个控制器中使用 2 个 ui-codemirrors
【发布时间】：2017-01-06 03:40:13
【问题描述】：

我正在使用AngularJS 和ui-codemirror 编写一个非常基本的操场。这是代码 (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();
  }
})

上面的代码有效，但问题是它将一个相同的ui.config 应用于2 个ui-codemirror。有谁知道如何将模式html 应用于第一个ui-codemirror 和模式css 应用于第二个ui-codemirror？

另外，我如何设置ui-codemirror 的高度（或rows）和宽度（或cols）？

【问题讨论】：

标签： angularjs iframe angular-ui codemirror ui-codemirror

【解决方案1】：

控制器：

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>

【讨论】：

谢谢记录，这里是JSBin

【解决方案2】：

由于您要处理两个具有不同角色的单独文本区域（或者想象它们是否更多），因此为它们定义单独的指令是有意义的，每个指令都接受不同的配置对象。我创建了一个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 });
              });
            }]
          };
        }
      };
    }
  ]);

我有意使用父控制器提供的处理程序，而不是绑定到父作用域，因为即使在查看 HTML 标记时，这也会使事情看起来更容易理解。

控制器：

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);
      };
    }
  ]);

标记：

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

希望这会有所帮助。

【讨论】：