Почему персонаж MathJax не работает или иногда застревает в AngularJS?

Question

Я использую библиотеку JavaScript MathJax версии 2.6.1 с применением приложения Angular 1.4. У меня есть страница, где у меня есть несколько тегов, на которые я вызываю одну и ту же директиву, которая вызывает MathJax.Hub.Queue («Typet», MathJax.Hub, elem [0]) в теге. Кажется, что персонажи первого элемента застревают в состоянии предварительной обработки (с серым текстом предварительного просмотра) и не полностью обрабатываются до их окончательной формы.

На загрузке страницы я также называю MathJax.Hub.Queue («Typet», MathJax.Hub, document.body), а затем он отлично работает. Это когда теги загружаются из AngularJS, что первый тег застревает в состоянии предварительной обработки.

Answer 1

Отвечая на мой собственный вопрос, так как я понял, решение:

Я провел пару часов отладки кода MathJax и ничто, казалось, явно неправильно быть. Я догадался, что реализация очереди MathJax не очень хорошо работает с просмотром возможностей AngularJS. Я смог исправить это после помещения MathJax.Hub.Queue("Typeset", MathJax.Hub, elem[0]) внутри $timeout(fn, 0).

Фиксированная директива закончилась выглядеть так:

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

}