我想使用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>→</mo><mfrac> <mi>π</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>→</mo><mfrac> <mi>π</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扩展名来查看预期的输出。
答案 0 :(得分:0)
您可以将内容html分成不同的部分,并填充html标签。例如
<span>The value of </span><math xmlns='http://www.w3.org/1998/Math/MathML'...></math><span>is</span>
答案 1 :(得分:0)
我正在使用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;
});