Getting MathJax to update after changes to AngularJS model

Question

I am trying to use AngularJS two-way binding text which includes Latex style equations. I would like to call MathJax to format the equations, but I\'m not sure of the best

Answer 1

Here's a directive that lets you use double curly markup inside the expression (and doesn't require setting an expression variable on the scope). It's based on this blog post, except I only support MathJax, and I save the compiled DOM, so that it updates on changes to scope variables.

As Alex Osborn said, it's best to separate non-math from math.

Usage:

This is inline math: x^{ {{power}} }, 
and this is display math: 
 y^{ {{power}} } .

In a snippet:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.power = "\\sin(x^2)";
  })
  .directive('latex', function() {
    return {
      restrict: 'AE',
      link: function(scope, element) {
        var newDom = element.clone();
        element.replaceWith(newDom);
        var pre = "\\(",
          post = "\\)";
        if (element[0].tagName === 'DIV') {
          pre = "\\[";
          post = "\\]";
        }
        scope.$watch(function() {
          return element.html();
        }, function() {
          console.log(element);
          newDom.html(pre + element.html() + post);
          MathJax.Hub.Typeset(newDom[0]);
        });
      }
    }
  });

  
Power:
    
  
  
This is the inline latex,
    x^{ {{power}} }, followed by some display mode latex
    
y^{ {{power}} } = {{power}}.
And that's it!