AngularJS $compile 和外部指令 ui-codemirror

Question

我正在尝试使用外部模块angular-ui-codemirror，使用嵌套指令ui-codemirror 在代码格式块中显示封闭AngularJS 指令的$element.html()。

如果你想知道我为什么需要这样做，请查看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()