3

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.config2 に同じものを適用することui-codemirrorです。htmlモードを最初ui-codemirrorに、モードcssを2番目に適用する方法を知っている人はいますui-codemirrorか?

さらに、高さ (またはrows) と幅 (またはcols)を設定するにはどうすればよいui-codemirrorですか?

4

2 に答える 2

2

かなり異なる役割を持つ 2 つの別個のテキスト領域を扱っているため (または、より多くの役割があると想像してください)、それらに対して別個のディレクティブを定義し、それぞれが異なる構成オブジェクトを受け入れるようにすることは理にかなっています。さまざまな「ミラー」を生成するために使用できるディレクティブ ファクトリを介して、1 つの可能なアプローチを示す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>

お役に立てれば。

于 2017-01-10T16:59:26.273 に答える
2

コントローラ：

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>
于 2017-01-10T14:26:36.260 に答える