Применить CodeMirror к текстовой области, привязанной к ng-модели.

Я кодирую очень сложную игровую площадку. По какой-то причине мне нужно встроить html-панель внутри приложения AngularJS.Применить CodeMirror к текстовой области, привязанной к ng-модели.

В this version я поместил слушателя изменений JQuery на панель CSS и применил CodeMirror к текстовой области. И это сработало.

Мне было неудобно иметь слушателя событий JQuery внутри приложения AngularJS, поэтому я решил привязать панель CSS к приложению AngularJS и сделал this version. Но теперь, проблема в том, код CodeMirror (что я комментарий ниже) больше не работает:

HTML:

<body> 
    <div ng-app="myApp" ng-controller="myCtrl"> 
    HTML:<br> 
    <textarea rows=10 cols=40 ng-model="area1">html body area</textarea> 
    <br>CSS:<br> 
    <textarea id="css" rows=10 cols=40 ng-model="css"></textarea> 
    </div> 
    Output: 
    <section id="output"> 
    <iframe></iframe> 
    </section> 
</body>

JavaScript:

var app = angular.module('myApp', []); 

app.controller('myCtrl', function($scope) { 
    $scope.area1 = "<body>default</body>"; 
    $scope.$watch('area1', function (json) { 
     render(); 
    }, true); 

    $scope.css="body {color: red}"; 
    $scope.$watch('css', function (json) { 
     // CodeMirror does not work anymore 
     // var cm_opt = { mode: 'css', gutter: true, lineNumbers: false }; 
     // var css_box = document.getElementById("css"); 
     // var css_editor = CodeMirror.fromTextArea(css_box, cm_opt); 
     render(); 
    }, true); 

    function render() { 
     var source = "<html><head><style>" + $scope.css + "</style></head>" + 
        $scope.area1 +"</html>"; 

     var iframe = document.querySelector('#output iframe'), 
      iframe_doc = iframe.contentDocument; 

     iframe_doc.open(); 
     iframe_doc.write(source); 
     iframe_doc.close(); 
    } 
});

Кто-нибудь знает, как сделать CodeMirror работу Вот?

Кроме того, действительно ли плохая идея использовать прослушиватели событий JQuery внутри приложения AngularJS? Какая лучшая структура для кодирования этой игровой площадки, использующей AngularJS + CodeMirror?

Edit 1: Я нашел this thread, то я сделал codeMirror directive, это не очень хорошо работает. DevTools показывает мне ошибку TypeError: textarea.getAttribute is not a function на CodeMirror.fromTextArea(...).

источник

2016-12-27 Anonymous

Here Я добавил Демонстрационный код для зеркала в угловом режиме. Я надеюсь, что это поможет ...

Here Demo

источник

2016-12-29 13:24:03

Действительно, я должен использовать 'ui-codemirror'. Для записи здесь [рабочая версия] (https://jsbin.com/yiviwol/8/edit?html,js,output) и связанный с ней вопрос: [Использовать 2 ui-codemirrors в 1 контроллере] (http ://переполнение стека.com/questions/41498554/use-2-ui-codemirrors-in-1-controller) –

Вы можете использовать

UI.Codemirror directive

источник

2017-01-05 10:23:51

Ответ решить 2-ю попытку ОП

В link функции директивы вы используют параметр elem как чистый элемент HTML (который, как ожидается, codemirror), но угловой обеспечивает его как JQL Ite обернутого элемента - так в основном вам просто нужно, чтобы получить HTML-элемент из него и обеспечить его к CodeMirror, то он будет работать:

var editor = CodeMirror.fromTextArea(elm[0], cm_opt);

(обратите внимание elem[0] вместо elem)

В AngularJS это не является плохой практикой использовать директивы для переноса логики на основе JQuery для создания компонентов, которые полагаются на другие технологии, такие как кодовое зеркало. В некоторых случаях вы можете сделать это самостоятельно, но также можете использовать уже созданные сторонние библиотеки, как указано в других ответах.

Что бы вы ни делали, убедитесь, что вы инкапсулируете неагрессивную логику, используя директивы и службы.

Надеюсь, это поможет.

источник

2017-01-05 10:34:34

Спасибо, 'var editor = CodeMirror.fromTextArea (elm [0], cm_opt);' does works, и я буду использовать 'ui -codemirror' ... –

Применить CodeMirror к текстовой области, привязанной к ng-модели.

ответ

Смежные вопросы