컨트롤러에서 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>

자바 스크립트 :

는

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에 적용됩니다. 누구든지 모드 을 첫 번째 ui-codemirror에 적용하고 모드 css을 두 번째 ui-codemirror에 적용하는 방법을 알고 있습니까?

또한 높이 (또는 rows)와 너비 (또는 cols)를 ui-codemirror으로 설정할 수 있습니까?

출처

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

오히려 다른 역할을 가지고 (또는 더 있다면 상상) 두 개의 분리 된 텍스트 영역을 취급하고 있기 때문에,이에 의미가 있습니다 각각에 다른 설정 객체를 허용하는 별도의 지시문을 정의하십시오. JSBin을 만들었습니다. 가능한 접근법 하나를 보여줍니다. 다른 "미러"를 생성하는 데 사용할 수있는 지시문 팩토리를 사용합니다. 이 일들이 HTML 마크 업을보고있는 동안에도 더 이해 보이게 나는 의도적으로 대신 부모 범위에 바인딩의 부모 컨트롤러가 제공하는 핸들러를 사용하고

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

컨트롤러 :

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

답변

관련 문제