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()函数或在typeset函数中设置MathJax.Hub.Queue回调，但它不起作用。这是因为我使用的降价解析器或数据是如何编码的？或者只是在合适的时间排版MathJax？

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

Answer 1

我在MathJax的项目中使用了这个（mathjaxBind.directive.js）指令，它为我工作：

<强> Plunker

<强> mathjaxBind.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>

MathJax不使用Angular进行渲染

1 个答案: