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

Question

我正在尝试呈现一个 AsciiMath 表达式，该表达式作为字符串从 MySQL 数据库中加载。这是有问题的 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 表达式？

How to dynamically render a mathjax asciimath expression using AngularJS in a div?

mathjax

angularjs

asciimath