Question

我正在尝试渲染一个从MySQL数据库中作为字符串加载的AsciiMath表达式。这是有问题的div：

<div class="description-text" mathmode>
    {{globals.gameData[globals.navigation.selectedSubject].Chapters[globals.navigation.selectedChapter].Sections[globals.navigation.selectedSection].Problems[globals.navigation.selectedProblem].Description}}
</div>

以上加载的字符串类似于：解析`x：4 *（4x）+ 2 * x = 72`

这是我用来修复普通mathjax显示问题的指令：

(function () {
'use strict';

angular
    .module('app')

    // Fixes the MathJax display issue with AngularJS        
    .directive("mathmode", function () {
        return {
            restrict: "A",
            controller: ["$element", function ($element) {
                    MathJax.Hub.Queue(["Typeset", MathJax.Hub, $element[0]]);
                }]
        };
    })
})();

当我在HTML中使用此指令用于静态表达式时，一切正常。当我尝试将它用于上面的div中的动态数据时，表达式在刷新页面之前无法正确呈现。我该怎么做才能解决这个问题？

Answer 1

原来解决方案非常简单，根本不需要指令。我刚刚添加了以下一行

setTimeout(function () {
    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
});

在控制器中，一切正常。控制器只需要DOM首先安定下来。

如何在div中使用AngularJS动态渲染mathjax asciimath表达式？

1 个答案: