在 Angularjs 中加载新视图后刷新 MathJax

Question

我有或多或少简单的 html 页面，其中包含由 MathJax 呈现的数学公式。我现在正在使用 AngularJS 构建一个新系统，从 angular-seed 开始。所有单独的 html 文件都包含在部分文件中。 正如预期的那样，只有当我刷新页面时，MathJax 才能正确呈现，当我通过框架加载它时，Math-Expressions 不会呈现。

我必须在某处运行这个函数：

MathJax.Hub.Queue(["Typeset",MathJax.Hub]);

它应该在每次加载部分后运行以正确呈现公式。我该怎么做？

M

Answer 1

在解决了您描述的相同问题后，我找到了一个快速但有点不雅的解决方案：包含MathJax.Hub.Queue(["Typeset",MathJax.Hub]); 的第二个副本。例如，这是我的控制器的一部分，我希望在更新范围后重新排版 MathJax：

function selectLesson(name){
        $scope.page = name.Path;
        if(!$mdMedia('gt-md')){
            $scope.toggleSideNav('left');
        }
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
    }

由于 MathJax 是异步加载的 (check out the MathJax Doc)，运行 MathJax.Hub.Queue(["Typeset",MathJax.Hub]); 将等到页面重新加载以重新排版页面。再次运行相同的命令会导致排版立即发生。

Answer 2

我建议使用由属性触发的指令。所以你的 HTML 看起来像：

<span eqn-bind="$F = ma$"></label>

和你的指令：

.directive('eqnBind', function () {
    return {
        restrict: "A",
        controller: ["$scope", "$element", "$attrs", function ($scope, $element, $attrs) {

            // Use this if it's a one-time thing and you don't need to re-render equations once they've been
            // inserted into the DOM.
            var value = $scope.$eval($attrs.esduEqnBind);
            $element.html(value);
            MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $element[0]]);
            
            /*
            // Use this if you need to re-render eqns that already exist on the page or are going to need constant updates
            $scope.$watch($attrs.eqnBind, function (value) {
                $element.html(value);
                MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $element[0]]);
            });
            */
        }]
    };
})

指令的第二部分（已注释掉）与来自“Getting MathJax to update after changes to AngularJS model”的answer 或多或少相同。

第一部分不需要$watch，所以效率应该更高。

顺便说一句，我发现了katex，它看起来更轻、更快。使用 katex 上面的变成：

.directive('eqnBind', function () {
    return {
        restrict: "A",
        controller: ["$scope", "$element", "$attrs", function ($scope, $element, $attrs) {

            // Use this if it's a one-time thing and you don't need to re-render equations once they've been
            // inserted into the DOM.
            var value = $scope.$eval($attrs.eqnBind);
            $element.html(value);
            renderMathInElement($element[0], { delimiters: [{ left: "$", right: "$", display: false }] });

            /*
            // Use this if you need to re-render eqns that already exist on the page...
            $scope.$watch($attrs.eqnBind, function (value) {
                $element.html(value);
                renderMathInElement($element[0], {delimiters:[{ left: "$", right: "$", display: false }]});
            });
            */
        }]
    };
})