MathJax不渲染具有角

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路由器，如果这与它有任何关系。

Answer 1

我用在我的项目本（mathjaxBind.directive.js）指令的MathJax和工作对我来说：

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>