MathJax Equation AngularJS

by repa

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;delayStartupUntil=configured&amp;dummy=.js"></script>
<div ng-controller="MyCtrl">
    <input type="text" ng-model="html"/><br/>
    <!--<span mathjax-bind="expression"></span>-->
    <div dynamic="html"></div>
    
</div>

CSS

input[type="text"] {
    width: 800px;
}
.red{
    color:red;
    display:inline-block;
}
.blue{
    color:blue;
    display:block;
}

JavaScript

MathJax.Hub.Config({
    skipStartupTypeset: true,
    messageStyle: "none",
    "HTML-CSS": {
        showMathMenu: false
    }
});
MathJax.Hub.Configured();
var myApp = angular.module("myApp", []);
myApp.directive("mathjaxBind", function() {
    return {
        restrict: "A",
        scope:{
            text: "@mathjaxBind"
        },
        controller: ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
            
            $scope.$watch('text', function(value) {
//                console.log(value);
                var $script = angular.element("<script type='math/tex; mode=" + ($attrs.mathjaxMode == undefined ? "inline" : $attrs.mathjaxMode) + "'>")
                    .html(value == undefined ? "" : value);
                $element.html("");
                $element.append($script);
                MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $element[0]]);
            });
        }]
    };
});
myApp.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
          //var match = /\$([^$]+)\$/.exec(value);
                //console.log(value.replace( new RegExp("\\$([^$]+)\\$","gm"),"foo"));
          
          html = html.replace(/\$\$([^$]+)\$\$/g, "<span class=\"blue\" mathjax-mode=\"display\" mathjax-bind=\"$1\"></span>");
               html = html.replace(/\$([^$]+)\$/g, "<span class=\"red\" mathjax-mode=\"inline\" mathjax-bind=\"$1\"></span>");                
                //var $script1 = angular.element("<span>")                    .html(value1 == undefined ? "" : value1);
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});
function MyCtrl($scope, $element) {    
    $scope.html = "A coin of is $ \\frac{5}{4} $ thrown $$\\frac{1}{6}$$ dfv";
}