Official Blog
technical

MathJax Binding in Angular.js

Coupling the Angular.js framework with other JavaScript frameworks like MathJax is not that easy. Learn here MathJax binding in Angular.js.

Introduction to Mathjax

MathJax is an open source JavaScript framework that makes formatting mathematical formulas easy. We use MathJax for rendering the many statistical formulas in the description of the DataCamp exercises. Mathjax converts a string like:

[ left( sum_{k=1}^n a_k b_k right)^2
leq left( sum_{k=1}^n a_k^2 right)
left( sum_{k=1}^n b_k^2 right) ][/code]

to


MathJax binding in Angular.js

MathJax binding in Angular.js

At DataCamp, we use Angular.js as our JavaScript MVC framework to create the feeling of a "single-page application". However, one of the downsides of using such an MVC framework is that it's not always easy to couple it with other JavaScript frameworks like for instance MathJax.

Angular provides databinding between the model and the view (more info here). The goal is to create something called a directive, that automatically renders the MathJax syntax when the model changes and the view is updated. So we are actually focussing on MathJax binding in Angular.js.

Step 1 : Include the MathJax source script

Step 2 : Create the Directive

This code will create a mathjax directive that watches for any change on the ng-model attribute. This means that if a controller changes the $scope.mjx property, MathJax will automatically rerender the changed element. In other words, we've done MathJax binding in Angular.js

If you have any questions or suggestions, feel free to let me know at dieter@datacamp.com