Start Learning for Free

Join over 500,000 other Data Science learners and start one of our interactive tutorials today!

Placeholder

MathJax binding in Angular.js

May 20th, 2014 in Technical

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:[code][ left( sum_{k=1}^n a_k b_k right)^2leq 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

[code]<script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>[/code]

Step 2 : Create the Directive

[iframe width="100%" height="300" src="http://jsfiddle.net/ddmkr/CBMLx/embedded/html,js" allowfullscreen="allowfullscreen" frameborder="0"]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.jsIf you have any questions or suggestions, feel free to let me know at dieter@datacamp.com

Comments

No comments yet. Be the first to respond!