Question

我想在用户在下拉菜单中选择一个选项后显示的div部分中使用MathJax。对于下拉菜单，我使用Angular。但是，数学公式不会在用户从下拉菜单中选择选项后显示的div部分中呈现。请参阅以下示例：

.html文件：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.25/angular.js" data-semver="1.2.25"></script>
  <script src="app.js"></script>

      <!--for writing Mathjax-->
    <script type="text/x-mathjax-config">
        MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript" async
        src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
    </script>
</head>

<body>
Here it works: When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
                $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
<select class="form-control" ng-model="places1">
  <option>Choose Place</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<div ng-if="places1 == 'A'">Here it does not work. When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
                $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</div>

<div ng-if="places1 == 'B'">Here it does not work. When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
                $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$</div>

</body>
</html>

和app.js：

var app = angular.module('plunker', []);

app.controller('Ctrl', function($scope) {
  $scope.name = 'World';
});

Plunker：https://plnkr.co/edit/NUQdAftxYwP8qLfruQzi?p=preview

如何修复此渲染问题？

Mathjax不会使用Angular进行渲染

0 个答案: