Question

我使用了一些语法突出显示API来突出显示我的Web应用程序的代码片段。为此我使用了highlightjs。我创建了弹出模型和内部模型我已经放置了<pre>标签并且当模型打开时它应该显示我突出显示的xml字符串。

HTML代码段

<pre id="tepXml" ><code class="xml">{{tepXml}}</code></pre>

在AngularJs控制器中，将值从服务器动态绑定到tepXml。

AngularJs控制器

...$promise.then(function(data){
    $scope.tepXml=data.xml;
}

但问题是，当我打开弹出模型时，我的xml内容为空。没有显示任何内容。但是当我从<code class="xml"></code>移除<pre>时，xml内容会显示而不显示。我引用了一些帖子并在angularJs控制器中使用$compile，但问题仍然相同。

带有$ compile的AngularJs控制器

 var target = angular.element($window.document.querySelector('#tepXml'));
 var myHTML = data.xml;
 target.append( $compile( myHTML )($scope) );

如果有人知道我哪里出错了，请指出我。

Plunker

Answer 1

快速回答是：

$promise.then(function(data){
  $scope.tepXml=data.xml;
  // Call highlight api
  $timeout(function() {
    $('pre#tepXml code').each(function(i, block) {
    hljs.highlightBlock(block);  //or whatever the correct highlightjs call is.
  });
});

更多Angular的做法是从Angular调用jQuery函数来编写Directive。像这样：

.directive("highlightCode", function($interval) {
    return {
        restrict: "A",
        scope: { highlightCode: "=" },
        link: function(scope, elem, attrs) {
          $scope.$watch('highlightCode', function() {
            $(elem).find('code').each(function(i, block) {
            hljs.highlightBlock(block);  //or whatever the correct highlightjs call is.
          });
        }
    }
});

像这样使用：

<pre id="tepXml" highlight-code="tepXml"><code class="xml">{{tepXml}}</code></pre>

语法高亮显示的代码段不会与AngularJs ngBind一起显示

1 个答案: