告诉角不要解析某些HTML块

Question

对于上下文，我正在为我的角(1.5.8)应用程序构建语法高亮显示。对于语法突出显示，我使用Prism.js，不幸的是，当我在HTML中使用ng-include时，它不能突出显示我的代码。很容易理解，因为它引入了异步性。因此，为了克服这个问题，我创建了一个角指令，这样我就可以编写如下内容：

<prism lang="html">
  <md-toolbar layout layout-align="end center"></md-toolbar>
</prism>

然后，在我的指令中，到目前为止，我正在通过Prism.highlight(transclusion, Prism.languages[this.lang])运行该指令的内容。它工作，但唯一的问题是，角解析我的结论，并修改我的输入html，它添加了额外的类，因为我使用的layout和layout-align指令。

这是我的问题所在。我能告诉角“不要解析这段代码”吗？

编辑:我试图用<pre></pre>包装输入，但这没有帮助。角仍然解析它并增加了类。

Edit2:在我写这篇文章的时候，我有一个想法，把html元素放在角度上下文之外，给它们提供唯一的id。然后编写<prism code-id="some-unique-id">，然后该指令可以获取该uid引用的dom elem，并将其包含在dom中。嗯，丑陋的家伙，但我可以工作，对吗？

Edit3:我正在用更多的代码扩展这个帖子，这样你就可以得到完整的图片

1:在styleguide.html中

<!-- MATERIAL DESIGN -->
<div id="material">
  <h1>Material design assets</h1>
  <div ng-include="'./material.html'"></div>
</div>

2:在material.html中

<section>
  <h2>Dialog</h2>
  <md-button class="md-accent">Open sample dialog</md-button>

  <prism lang="html">
    <md-toolbar class="md-primary">
      <header class="md-toolbar-tools">
        <h3 class="md-headline">{{ 'Dialog title' | translate }}</h3>
        <!-- SPACER -->
        <span flex></span>
        <md-button class="md-icon-button" ng-click="ctrl.close()"><i class="material-icons">close</i></md-button>
      </header>
    </md-toolbar>
    <md-dialog-content>
      <div class="md-dialog-content">
        <!-- Content here -->
      </div>
    </md-dialog-content>
    <md-dialog-actions layout-padding layout layout-align="end center">
      <!-- stuff here -->
    </md-dialog-actions>
  </prism>
</section>

3:在构成部分

class PrismHighlighter {
    static get $descriptor() {
        return {
            controller: PrismHighlighter,
            template: `
                <pre>
                    <code class="language-{{$ctrl.lang}}">
                        <ng-transclude class="transclusion"></ng-transclude>
                    </code>
                </pre>
            `,
            transclude: true,
            bindings: {
                lang: '@'
            }
        }
    }

    static get $inject() {
        return ['$element'];
    }

    constructor($element) {
        this.element = $element;
    }

    $postLink() {
        const codeElem = this.element.find('code');
        const transclusion = $(this.element).find('ng-transclude').html();
        const hCode = Prism.highlight(transclusion, Prism.languages[this.lang]);
        codeElem.html(hCode);
    }
}
module.component('prism', PrismHighlighter.$descriptor);

4:和输出

​

​

现在你可以清楚地看到，有很多角相加的东西是我不想要的。

Answer 1

在它周围使用ng-non-bindable指令。

对于角1.x，只需使用：

<div ng-non-bindable>
</div>

对于角2.x，检查这个帖子，它展示了如何做同样的事情。

参考资料：

https://docs.angularjs.org/api/ng/directive/ngNonBindable