Zastosuj CodeMirror do textarea związanego z modelem ng

Koduję bardzo bardzo podstawowy plac zabaw. Z jakiegoś powodu muszę umieścić panel html wewnątrz aplikacji AngularJS.Zastosuj CodeMirror do textarea związanego z modelem ng

W this version wstawiłem odbiornik zmian JQuery do panelu CSS i zastosowałem CodeMirror do obszaru tekstowego. I zadziałało.

Czułam się nieswojo, jeśli chodzi o słuchacza zdarzeń JQuery wewnątrz aplikacji AngularJS, więc zdecydowałem się powiązać panel CSS z aplikacją AngularJS i utworzyć this version. Ale teraz, problem jest kod CodeMirror (że komentarz poniżej) już nie działa:

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

Czy ktoś wie, jak uczynić pracę CodeMirror tutaj?

Dodatkowo, czy naprawdę nie jest dobrym pomysłem korzystanie z detektorów zdarzeń JQuery wewnątrz aplikacji AngularJS? Jaka jest najlepsza struktura kodu tego placu zabaw, który używa AngularJS + CodeMirror?

Edit 1: znalazłem this thread, potem zrobiłem codeMirror directive, to nie działa dobrze. DevTools pokazuje mi błąd TypeError: textarea.getAttribute is not a function pod adresem CodeMirror.fromTextArea(...).

Źródło

2016-12-27 Anonymous

Here Dodałem Demo dla kodu lustro w angularjs. Mam nadzieję, że to pomoże ...

Here Demo

Źródło

2016-12-29 13:24:03

Rzeczywiście, powinienem użyć 'ui-codemirror'. Dla przypomnienia, jest to [wersja robocza] (https://jsbin.com/yiviwol/8/edit?html,js,output) i powiązane pytanie: [Użyj 2 ui-codemirrors w 1 kontrolerze] (http ://przepełnienie stosu.com/questions/41498554/use-2-ui-codemirrors-in-1-controller) –

Można użyć

UI.Codemirror directive

Źródło

2017-01-05 10:23:51

Response rozwiązać 2nd próbę OP

W link funkcji tej dyrektywy ty używają parametru elem jako czystego elementu HTML (który jest oczekiwany przez codemirror), ale kątowy zapewnia go jako JQL ITE zawinięty elementu - więc w zasadzie wystarczy, aby uzyskać element HTML z niej i dostarczyć go do CodeMirror, to będzie działać:

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

(zauważ elem[0] zamiast elem)

W angularjs to nie jest złą praktyką używanie dyrektyw do owijania logiki opartej na JQuery w celu tworzenia komponentów opartych na innych technologiach, takich jak lustro kodu. W niektórych przypadkach możesz zrobić to samemu, ale możesz także użyć już wbudowanych bibliotek stron trzecich, o czym wspomniano w innych odpowiedziach.

Cokolwiek robisz, upewnij się, że dobrze obudowujesz logikę niekrążkową, korzystając z dyrektyw i usług.

Mam nadzieję, że to pomoże.

Źródło

2017-01-05 10:34:34

Dziękuję, 'var editor = CodeMirror.fromTextArea (wiąz [0], cm_opt);' działa, a ja użyję 'ui -codemirror' ... –

Zastosuj CodeMirror do textarea związanego z modelem ng

Odpowiedz

Powiązane problemy