Question

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

我必须在某处运行此功能：

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

它应该在每次加载partial之后运行，以正确呈现公式。我怎么能这样做？

中号

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]]);
            });
            */
        }]
    };
})

该指令的第二部分（已注释掉）部分与“answer”中的Getting MathJax to update after changes to AngularJS model大致相同。

第一部分不需要$ 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 }]});
            });
            */
        }]
    };
})

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

2 个答案: