AngularJS $ компилировать и внешняя директива щ-CodeMirror

Question

Я пытаюсь использовать внешний модуль, angular-ui-codemirror, чтобы отобразить $element.html() из директивы ограждающих AngularJS в блоке кода в формате, используя вложенную директиву ui-codemirror.

Если вы хотите знать, зачем мне это нужно, посмотрите here.

Я могу легко увидеть из примеров, как это сделать со статическим текстом. И я могу передать innerHTML прилагаемой директивы в порядке. Он просто не компилируется впоследствии в директиву ui-codemirror.

Я вижу, here, что для этого, вероятно, необходимо использовать сервис $compile, но я не могу приспособить этот пример к этой ситуации.

Вот некоторые примеры AngularJS код:

angular.module('articles', ['ui.codemirror']).directive('jsCode', function($compile) { 
    return { 
    restrict: 'E', 
    link: function($scope, $element) {  
     $scope.codeText = $element.html(); 
     var template = '<div ' + 
      'ui-codemirror="{ ' + 
      'lineNumbers: true, ' + 
      'theme:\'twilight\', ' + 
      'readOnly: \'nocursor\', ' + 
      'lineWrapping: true, ' + 
      'mode: \'xml\'}" ' + 
      'ng-bind="codeText"></div>'; 
     var linkFn = $compile(template); 
     var content = linkFn($scope); 
     $element.replaceWith(content) 
    } 
    }; 
}); 

и HTML:

<js-code> 
&lt;html style=&quot;color: green&quot;&gt; 
&lt;!-- this is a comment --&gt; 
&lt;head&gt; 
&lt;title&gt;HTML Example&lt;/title&gt; 
&lt;/head&gt; 
&lt;body&gt; 
The indentation tries to be &lt;em&gt;somewhat &amp;quot;do what 
I mean&amp;quot;&lt;/em&gt;... but might not match your style. 
&lt;/body&gt; 
&lt;/html&gt; 
</js-code> 

this Plunker Я создал, чтобы проиллюстрировать мою дилемму. Первый блок неформатирован. Отформатирован второй блок (статический).

Answer 1

заменить в директиве jsCode

'ng-bind="codeText"></div>'; 

по

'ng-model="codeText"></div>'; 

и использовать

$element.text() 

вместо

$element.html()