Question

对于上下文，我正在为angular（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>中，但这没有帮助。 Angular仍然解析它并添加了类。

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

编辑3：我正在使用更多代码扩展帖子，以便您全面了解

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指令。

对于Angular 1.x，您可以使用：

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

对于角度2.x，请选中此post，以显示如何执行此操作。

参考：

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

告诉角度不要解析某些HTML块

1 个答案: