在 angularjs 中使用 <math> 标记呈现普通文本

Question

我想使用 angularjs

呈现以下内容

"The value of <math xmlns='http://www.w3.org/1998/Math/MathML' style='background-color:#'> <semantics> <mrow> <munder> <mrow> <mi>lim</mi></mrow> <mrow> <mi>x</mi><mo>&#x2192;</mo><mfrac> <mi>&#x03C0;</mi> <mn>2</mn> </mfrac> </mrow> </munder> <msup> <mrow> <mrow><mo>(</mo> <mrow> <mi>sin</mi><mi>x</mi></mrow> <mo>)</mo></mrow></mrow> <mrow> <mi>tan</mi><mi>x</mi></mrow> </msup> </mrow> <annotation encoding='MathType-MTEF'>MathType@MTEF@5@5@+= feaahaart1ev3aaatCvAUfeBSjuyZL2yd9gzLbvyNv2CaerbuLwBLn hiov2DGi1BTfMBaeXatLxBI9gBamXvP5wqonvsaeHbfrwDuv2yObqe euuDJXwAKbsr4rNCHbGeaGqiVu0Je9sqqrpepC0xbbL8F4rqqrFfpe ea0xe9Lq=Jc9vqaqpepm0xbba9pwe9Q8fs0=yqaqpepae9pg0Firpe peKkFr0xfr=xfr=xb9adbaqaaeaacaGaaiaabaqaaeGadaabaaGcba WaaCbeaeaaciGGSbGaaiyAaiaac2gaaSqaaiaadIhacqGHsgIRdaWc aaqaaiabec8aWbqaaiaaikdaaaaabeaakmaabmaabaGaci4CaiaacM gacaGGUbGaamiEaaGaayjkaiaawMcaamaaCaaaleqabaGaciiDaiaa cggacaGGUbGaamiEaaaaaaa@4A6C@ </annotation> </semantics></math> is"

以上内容包含纯文本以及 <math> 标签。

这是我想要实现的目标

查看文件

<span ng-bind-html="content"></span>

控制文件

$scope.content = "The value of <math xmlns = 'http://www.w3.org/1998/Math/MathML' style = 'background-color:#' > <semantics> <mrow> <munder> <mrow> <mi>lim</mi></mrow> <mrow> <mi>x</mi><mo>&#x2192;</mo><mfrac> <mi>&#x03C0;</mi> <mn>2</mn> </mfrac> </mrow> </munder> <msup> <mrow> <mrow><mo>(</mo> <mrow> <mi>sin</mi><mi>x</mi></mrow> <mo>)</mo></mrow></mrow> <mrow> <mi>tan</mi><mi>x</mi></mrow> </msup> </mrow> <annotation encoding='MathType-MTEF'>MathType@MTEF@5@5@+= feaahaart1ev3aaatCvAUfeBSjuyZL2yd9gzLbvyNv2CaerbuLwBLn hiov2DGi1BTfMBaeXatLxBI9gBamXvP5wqonvsaeHbfrwDuv2yObqe euuDJXwAKbsr4rNCHbGeaGqiVu0Je9sqqrpepC0xbbL8F4rqqrFfpe ea0xe9Lq=Jc9vqaqpepm0xbba9pwe9Q8fs0=yqaqpepae9pg0Firpe peKkFr0xfr=xfr=xb9adbaqaaeaacaGaaiaabaqaaeGadaabaaGcba WaaCbeaeaaciGGSbGaaiyAaiaac2gaaSqaaiaadIhacqGHsgIRdaWc aaqaaiabec8aWbqaaiaaikdaaaaabeaakmaabmaabaGaci4CaiaacM gacaGGUbGaamiEaaGaayjkaiaawMcaamaaCaaaleqabaGaciiDaiaa cggacaGGUbGaamiEaaaaaaa@4A6C@ </annotation> </semantics></math > is";

这是我得到的输出

The value of lim x→ π 2 ( sinx ) tanx MathType@MTEF@5@5@+= feaahaart1ev3aaatCvAUfeBSjuyZL2yd9gzLbvyNv2CaerbuLwBLn hiov2DGi1BTfMBaeXatLxBI9gBamXvP5wqonvsaeHbfrwDuv2yObqe euuDJXwAKbsr4rNCHbGeaGqiVu0Je9sqqrpepC0xbbL8F4rqqrFfpe ea0xe9Lq=Jc9vqaqpepm0xbba9pwe9Q8fs0=yqaqpepae9pg0Firpe peKkFr0xfr=xfr=xb9adbaqaaeaacaGaaiaabaqaaeGadaabaaGcba WaaCbeaeaaciGGSbGaaiyAaiaac2gaaSqaaiaadIhacqGHsgIRdaWc aaqaaiabec8aWbqaaiaaikdaaaaabeaakmaabmaabaGaci4CaiaacM gacaGGUbGaamiEaaGaayjkaiaawMcaamaaCaaaleqabaGaciiDaiaa cggacaGGUbGaamiEaaaaaaa@4A6C@ is

您只需将以上内容保存为 .html 扩展名即可查看预期输出。

Answer 1

可以将内容html拆分成不同的部分，在html中填写tag.such为

<span>The value of </span><math xmlns='http://www.w3.org/1998/Math/MathML'...></math><span>is</span>

Answer 2

我使用 ngsanitize 将 HTML 标记为 ng-bind-html 是安全的。后来我才知道 ng-bind-html 功能将使用 $sanitize 验证 Html。为了绕过这个验证，我使用了

app.filter("trustHtml", ['$sce', function ($sce) {
    return function (htmlCode) {
        return $sce.trustAsHtml(htmlCode);
    }
}]);

并将其用于

<span ng-bind-html="content" | trustHtml ></span>

除此之外，我还使用了

<script type="text/javascript"
            src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.0.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

呈现 <math> 标签内容。在这里，如果在 content 中进行了任何更改，MathJax 将需要刷新。因此，我使用以下内容来寻找变化

$rootScope.$watch(function () {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    return true;
});

在 angularjs 中使用 <math> 标记呈现普通文本

Rendering normal text with <math> tag in angularjs

mathjax

angularjs