Search code examples
javascriptangularjsmathjaxmathml

How to get MathML to render properly when switching views in AngularJS

When my web page initially loads, any MathML content that it contains will render as expected. However, once I navigate to another view that also contains MathML content, the new content does not render correctly.

If I navigate back to the initial view, the original content that rendered correctly no longer does so. I'm using the MathJax library with AngularJS.

How do I get the MathML to always render correctly?

Example code found here: https://github.com/JustCant/mathjax

Solution

  • I've found the solution to this issue.

    I created the following controller and added it to my "app" module:

    .controller("mainCtrl", ["$rootScope", function($rootScope) {
  $rootScope.$watch(function() {
   MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
   return true;
  });
}]);

    The following documentation explains in greater detail: http://docs.mathjax.org/en/latest/advanced/typeset.html