为什么 MathJax 角色有时不起作用或卡在 AngularJS 中？

Question

我将 MathJax 的 javascript 库版本 2.6.1 与 Angular 1.4 应用程序一起使用。我有一个页面，其中有多个标签，我在这些标签上调用相同的指令，该指令在标签上调用 MathJax.Hub.Queue("Typeset", MathJax.Hub, elem[0])。似乎第一项的字符卡在预处理状态（带有灰色预览文本）并且没有完全处理为最终形式。

在页面加载时，我还调用了 MathJax.Hub.Queue("Typeset", MathJax.Hub, document.body) ，然后它就可以正常工作了。当从 AngularJS 加载标签时，第一个标签会卡在 Preprocessing 状态。

Answer 1

在我找到解决方案后回答我自己的问题：

我花了几个小时调试 MathJax 代码，似乎没有什么明显的错误。我猜这是 MathJax 的队列实现不能很好地与 AngularJS 的范围监视配合使用。将MathJax.Hub.Queue("Typeset", MathJax.Hub, elem[0]) 放入$timeout(fn, 0) 后，我能够修复它。

fixed 指令最终看起来像这样：

angular.module('xpl.widget').directive('mathjaxBind', mathjax);

/* ngInject */
function mathjax($timeout) {
    return {
        priority: 100,
        restrict: "A",
        link: {
            post: postLink
        }
    }

    // ## postLink
    function postLink(scope, elem, attrs) {
        MathJax.Hub.Config({
            "HTML-CSS": {
                styles: {
                    ".MathJax_Display": {
                        "overflow-x": "auto"
                    }
                }
            }
        });
        scope.$watch(attrs.mathjaxBind, function (newVal, oldVal, scope) {
            // Add $timeout to MathJax Typesetting due to bug where first result wasn't getting queued properly. 
            $timeout(function() { 
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, elem[0]]);
            }, 0);
        });
    }

}