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

Question

I'm trying to render an AsciiMath expression that gets loaded as a string from a MySQL database. This is the div in question:

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

The above loaded string is something like: Solve for `x: 4*(4x) + 2*x = 72`

And this is the directive I use to fix the normal mathjax display issues:

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

When I use this directive for static expressions in HTML, everything works fine. When I try to use it for dynamic data like in the above div though, the expression doesn't get rendered correctly until I refresh the page. What can I do to fix this?

Answer 1

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

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

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