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

AngularJS $ compile和外部指令ui-codemirror

1 个答案: