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

【问题标题】：How to dynamically render a mathjax asciimath expression using AngularJS in a div?如何在 div 中使用 AngularJS 动态呈现 mathjax asciimath 表达式？
【发布时间】：2016-02-08 18:04:38
【问题描述】：

我正在尝试渲染一个 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 中的动态数据时，直到刷新页面后，表达式才会正确呈现。我该怎么做才能解决这个问题？

【问题讨论】：

标签： angularjs mathjax asciimath

【解决方案1】：

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

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

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

【讨论】：