コントローラで2つのui-codemirrorsを使用する

私はAngularJSとui-codemirrorを使って非常に基本的な遊び場をコーディングしています。コードは（JSBin）です。コントローラで2つのui-codemirrorsを使用する

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

上記のコードは動作しますが、問題は、それが1と同じに適用されています。誰でも最初のui-codemirrorにモードhtmlを適用し、cssを2番目のui-codemirrorにモードを適用する方法を知っていますか？

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

出典

2017-01-06 Anonymous

コントローラー：

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-10 14:26:36 mustaphahawi

ありがとうございます。ここには[JSBin]（https://jsbin.com/pelaruhexu/2/edit?html,js,output） –

あなたはかなり異なる役割を持っている（または、彼らはそれ以上だった場合を想像）は、2つの独立したテキスト領域を扱っているので、それが理にかなっていますそれぞれ異なる設定オブジェクトを受け入れる個別のディレクティブを定義します。 JSBinを作成しました。このアプローチは、さまざまな「ミラー」を生成するために使用できるディレクティブファクトリを使用して、1つの可能なアプローチを示しています。

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-10 16:59:26

ありがとうございます、ありがとうございます... –

コントローラで2つのui-codemirrorsを使用する

答えて

関連する問題