MathJax 不使用 Angular 进行渲染

Question

我遇到的问题是这样的：

在我的网站上，我从外部来源拉取我的博客内容，第一次显示它时，必须使用 HTTP 请求来获取。另外，博客文章是用 Markdown 编写的，我必须将其解析为 HTML。

我有这个控制器，它可以从 github 获取帖子，解码它们，然后将它们解析为 HTML：

app.controller('content', function ($scope, github, html) {

    github.getAllContent().then(function (res) {
        var files = [];
        res.data.forEach(function (obj) {
            github.getFile(obj.path).then(function (res) {
                res.data.content = marked(window.atob(res.data.content));
                res.data.name = res.data.name.slice(0, res.data.name.indexOf('.'));
                files.push(res.data);
            })
        });
        $scope.files = files;
    });

    $scope.renderHtml = html.renderHtml;
});

html是这个服务

app.service('html', function ($sce) {
    this.renderHtml = function (string) {
        return $sce.trustAsHtml(string);
    }
});

这允许我将 HTML 插入到每个 HTML 元素中，如下所示：<elem>ng-bind-html="renderHtml(info) </elem>"。

但是，每当我这样做时，都不会呈现 LaTeX 内容。我已将 MathJax 配置为将 $ ... $ 识别为分隔符，但无论发生什么，我似乎都无法渲染任何内容。我什至调用了MathJax.Hub.Typeset() 函数或在MathJax.Hub.Queue 函数中设置了typeset 回调，但它不起作用。这是因为我使用的降价解析器还是数据的编码方式？还是只是在正确的时间排版 MathJax 的问题？

在这个项目中，我使用 Angular ui-router，如果这与它有关的话。

Answer 1

我在我的项目中为MathJax 使用了这个 (mathjaxBind.directive.js) 指令，它对我有用：

Plunker

ma​​thjaxBind.directive.js

'use strict';
MathJax.HTML.Cookie.Set("menu", {});
MathJax.Hub.Config({
  skipStartupTypeset: true,
  messageStyle: "none",
  extensions: ["tex2jax.js", "mml2jax.js", "MathML/content-mathml.js", "MathML/mml3.js"],
  jax: ["input/MathML", "input/TeX", "output/SVG", "output/HTML-CSS", "output/NativeMML", "output/CommonHTML"],
  "HTML-CSS": {
    availableFonts: [],
    styles: {".MathJax_Preview": {visibility: "hidden"}},
    showMathMenu: false
  },
  "SVG": {
    availableFonts: [],
    styles: {".MathJax_Preview": {visibility: "hidden"}},
    showMathMenu: false
  },
  "NativeMML": {
    availableFonts: [],
    styles: {".MathJax_Preview": {visibility: "hidden"}},
    showMathMenu: false
  },
  "CommonHTML": {
    availableFonts: [],
    styles: {".MathJax_Preview": {visibility: "hidden"}},
    showMathMenu: false
  }
});
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready", function () {
  var FONT = MathJax.OutputJax["HTML-CSS"].Font;
  FONT.loadError = function (font) {
    MathJax.Message.Set("Can't load web font TeX/" + font.directory, null, 2000);
    document.getElementById("noWebFont").style.display = "";
  };
  FONT.firefoxFontError = function (font) {
    MathJax.Message.Set("Firefox can't load web fonts from a remote host", null, 3000);
    document.getElementById("ffWebFont").style.display = "";
  };
});

(function (HUB) {

  var MINVERSION = {
    Firefox: 3.0,
    Opera: 9.52,
    MSIE: 6.0,
    Chrome: 0.3,
    Safari: 2.0,
    Konqueror: 4.0,
    Unknown: 10000.0 // always disable unknown browsers
  };

  if (!HUB.Browser.versionAtLeast(MINVERSION[HUB.Browser] || 0.0)) {
    HUB.Config({
      jax: [],                   // don't load any Jax
      extensions: [],            // don't load any extensions
      "v1.0-compatible": false   // skip warning message due to no jax
    });
    setTimeout('document.getElementById("badBrowser").style.display = ""', 0);
  }

})(MathJax.Hub);

MathJax.Hub.Register.StartupHook("End", function () {
  var HTMLCSS = MathJax.OutputJax["HTML-CSS"];
  if (HTMLCSS && HTMLCSS.imgFonts) {
    document.getElementById("imageFonts").style.display = ""
  }
});
angular.module('fsaApp')
  .directive('mathjaxBind', function () {
    return {
      restrict: "A",
      controller: ["$scope", "$element", "$attrs", function ($scope, $element, $attrs) {
        $scope.$watch($attrs.mathjaxBind, function (value) {
          //$($element).parent().find('math').wrap("<script type='math/mml'></script>");
          $element.html(value);
          MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
        });
      }]
    };
  });

控制器：

app.controller('MainCtrl', function($scope) {
  $scope.info='<script type=\"math/mml\"><math>\n<mstyle displaystyle=\"true\">\n<mtext> N </mtext>\n<msub>\n<mrow>\n<mtext> O </mtext>\n</mrow>\n<mrow>\n<mn> 2 </mn>\n</mrow>\n</msub>\n</mstyle>\n</math></script>';
  $scope.info2='<script type=\"math/mml\"><math>\n<mstyle displaystyle=\"true\">\n<mtext> C </mtext>\n<msub>\n<mrow>\n<mtext> H </mtext>\n</mrow>\n<mrow>\n<mn> 4 </mn>\n</mrow>\n</msub>\n</mstyle>\n</math></script>';        
});

图书馆：

 <script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

在 HTML 中：

<div mathjax-bind="info"></div>
<div mathjax-bind="info2"></div>