0

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

如果你想知道我为什么需要这样做，请看这里。

从示例中我可以很容易地看到如何使用静态文本来实现这一点。我可以通过innerHTML封闭指令的。它只是不会在之后编译成ui-codemirror指令。

我在这里看到，可能有必要使用该$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>

我创建了这个 Plunker来说明我的困境。第一个块未格式化。第二个块（静态）被格式化。

4

1 回答 1

0

在 jsCode 指令中替换

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

经过

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

并使用

$element.text()

代替

$element.html()
于 2016-09-20T18:07:13.410 回答