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>

Ctrl文件

$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标签。例如

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

Answer 2

我正在使用ngsanitize通过ng-bind-html将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>标签渲染普通文本

2 个答案: