在更改AngularJS模型后更新MathJax

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 way to ensure that MathJax is called after AngularJS finishes changing the model. I think I need a callback. Here is my JavaScript:

我正在尝试使用包含Latex风格方程的AngularJS双向绑定文本。我想调用MathJax来格式化方程式，但我不确定在AngularJS完成模型更改后确保调用MathJax的最佳方法。我想我需要一个回调。这是我的JavaScript：

var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
   $scope.Update = function() {
       $scope.Expression = 'Evaluate: \\( \\frac{9}{4} \\div \\frac{1}{6} \\)';
       MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
   }
   $scope.Expression = 'Evaluate: \\( \\frac{5}{4} \\div \\frac{1}{6} \\)';

}

}

And here is my HTML:

这是我的HTML：

<div ng-controller="MyCtrl">
    <button ng-click="Update()">Update</button>
  {{Expression}}
</div>

Fiddle is here: http://jsfiddle.net/LukasHalim/UVjTD/1/. You'll notice that on the fiddle the original expression isn't removed even after you click the update button twice - seems like a bug or conflict.

小提琴在这里：http：//jsfiddle.net/LukasHalim/UVjTD/1/。您会注意到，即使您单击两次更新按钮，原始表达式也不会被删除 - 看起来像是一个错误或冲突。

10 个解决方案

#1

Having wasted many days (and maybe weeks) fighting MathJax, I'm all too familiar with its various quirks with updating math expressions on the fly. I'm brand new to Angular but this gave me a good chance to dive in and I ended up with a solution which solves my problems -- hopefully it'll solve yours as well.

浪费了许多天（也许是几周）与MathJax作斗争，我对它的各种怪癖都非常熟悉，可以动态更新数学表达式。我是Angular的新手，但这给了我一个很好的机会潜入，我最终得到了一个解决我的问题的解决方案 - 希望它也能解决你的问题。

Live demo: http://jsfiddle.net/spicyj/YpqVp/

现场演示：http：//jsfiddle.net/spicyj/YpqVp/

---

Instead of using the plain interpolation that Angular provides, I created a new directive based on ng-bind called mathjax-bind.

我没有使用Angular提供的普通插值，而是创建了一个基于ng-bind的新指令，名为mathjax-bind。

If expression is a variable containing math code, then instead of \( {{expression}} \) you can write:

如果expression是包含数学代码的变量，那么您可以编写：而不是\（{{expression}} \）

<span mathjax-bind="expression"></span>

and everything will be typeset and updated at the appropriate times.

一切都将在适当的时候排版和更新。

The supporting code for the directive follows:

该指令的支持代码如下：

myApp.directive("mathjaxBind", function() {
    return {
        restrict: "A",
        controller: ["$scope", "$element", "$attrs",
                function($scope, $element, $attrs) {
            $scope.$watch($attrs.mathjaxBind, function(texExpression) {
                var texScript = angular.element("<script type='math/tex'>")
                    .html(texExpression ? texExpression :  "");
                $element.html("");
                $element.append(texScript);
                MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $element[0]]);
            });
        }]
    };
});

#2

Simplest, fastest and most stable solution:

最简单，最快速，最稳定的解决方案：

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

Advantages:

优点：

• Easy to setup, just copy this code.
• 易于设置，只需复制此代码即可。
• Everything on your page is typeset.
• 页面上的所有内容都是排版的。
• It renders much faster than the other solutions. This is because it can render the page in one go. Other answers here wait for one item to finish, until they typeset the next one. That makes rendering veeeery slow if there are for example multiple mathjax-bind directives (as another answer suggests). This point is the reason I was looking for a different answer.
• 它的渲染速度比其他解决方案快得多。这是因为它可以一次渲染页面。其他答案在这里等待一个项目完成，直到他们排版下一个。如果有多个mathjax-bind指令（如另一个答案所示），这会使渲染速度变慢。这一点是我寻找不同答案的原因。
• You can still easily exclude elements using the option “ignoreClass” in your mathjax settings.
• 您仍然可以使用mathjax设置中的“ignoreClass”选项轻松排除元素。

Benchmarking: 100 mathjax-bind directives took 63 seconds, while with this method it took 1.5 second to render the page. I know that this function will be executed a lot since it's called on every digest cycle, however, it doesn't noticeably slow down the page.

基准测试：100个mathjax-bind指令耗时63秒，而使用此方法渲染页面需要1.5秒。我知道这个函数会被执行很多，因为它在每个摘要周期都被调用，但是，它并没有明显减慢页面的速度。

#3

I created a simple fiddle expanding on Ben Alpert's answer. Here's the fiddle and plunk.

我创造了一个简单的小提琴，扩展了Ben Alpert的答案。这是小提琴和插件。

Specifically If a text has only a part of it to be converted by Mathjax, you can use this. For inline mathjax you must surround the text by $, and for block display you must surround the block by $$. (You can use any format you like if you create the corresponding regex)

特别是如果文本只有一部分要由Mathjax转换，您可以使用它。对于内联mathjax，您必须用$围绕文本，对于块显示，您必须用$$围绕块。 （如果创建相应的正则表达式，可以使用任何您喜欢的格式）

app.js

app.js

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) {
                var $script = angular.element("<script type='math/tex'>")
                    .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) {
          html = html.replace(/\$\$([^$]+)\$\$/g, "<span class=\"blue\" mathjax-bind=\"$1\"></span>");
          html = html.replace(/\$([^$]+)\$/g, "<span class=\"red\" mathjax-bind=\"$1\"></span>");
        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";
}

index.html

的index.html

<!DOCTYPE html>
<html ng-app="myApp">    
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntil=configured&dummy=.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <div ng-controller="MyCtrl">
     <input type="text" ng-model="html"/><br/>
     <div dynamic="html"></div>
  </div>
</body>    

style.css

style.css文件

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

#4

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.

这是一个指令，允许您在表达式中使用双重卷标（并且不需要在作用域上设置表达式变量）。它基于这篇博文，除了我只支持MathJax，我保存已编译的DOM，以便更新范围变量。

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

正如Alex Osborn所说，最好将非数学与数学分开。

Usage:

用法：

<p>This is inline math: <latex>x^{ {{power}} }</latex>, 
and this is display math: <div latex> y^{ {{power}} } .</div></p>

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]);
        });
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

<div ng-app="app" ng-controller="ctrl">
  <p>Power:
    <input ng-model="power" />
  </p>
  <p>This is the inline latex,
    <latex>x^{ {{power}} }</latex>, followed by some display mode latex
    <div latex>y^{ {{power}} } = {{power}}.</div>And that's it!
  </p>
</div>

#5

A simple solution is to use $timeout to put MathJax.Hub.Queue(["Typeset", MathJax.Hub]) in the browser event queue (see Run a directive after the DOM has finished rendering).

一个简单的解决方案是使用$ timeout将MathJax.Hub.Queue（[“Typeset”，MathJax.Hub]）放入浏览器事件队列中（请参阅DOM完成渲染后运行指令）。

Something like this:

像这样的东西：

            var app = angular.module('myApp', []);
            app.controller('myController', function ($scope, $timeout) {
                controller = this;

                $scope.Update = function () {
                    $scope.value = " \\( \\frac{5}{4} \\div \\frac{1}{6} \\)";
                    $timeout(controller.updateMathJax, 0);
                }

                this.updateMathJax = function () {
                    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
                }
            });

#6

Take a look at http://jsfiddle.net/pz5Jc/

看看http://jsfiddle.net/pz5Jc/

In your template:

在您的模板中：

    {{Label}} <span id="mathElement">{{Expression}}</span>

In your controller:

在你的控制器中：

$scope.Update = function() {
    $scope.Expression = '\\frac{9}{4} \\div \\frac{1}{6}';
    $scope.Label = 'Updated Expression:'
    var math = MathJax.Hub.getAllJax("mathElement")[0];
    math.Text('\\frac{4}{4} \\div \\frac{2}{6}');
}

Couple of points:

几点：

I'm not too familiar with mathjax, but:

我对mathjax不太熟悉，但是：

• Splitting the label out from the expression allows you to work with the expression directly.
• 从表达式中拆分标签允许您直接使用表达式。
• You need to manually pick up a DOM element to force a refresh of the expression. This isn't a very 'angular' way to do things unfortunately - but when mathjax parses the expression (and inserts it's own DOM elements), it pushes those elements outside the angular bindings.
• 您需要手动选取DOM元素以强制刷新表达式。不幸的是，这不是一种非常“有角度”的方法 - 但是当mathjax解析表达式（并插入它自己的DOM元素）时，它会将这些元素推到角度绑定之外。
• Fix here is to specifically select the correct mathjax element and call a text change function to update the expression.
• 这里修复的是专门选择正确的mathjax元素并调用文本更改函数来更新表达式。

#7

You can try with my modifications http://jsfiddle.net/bmma8/4/ modify input or click on button will update your expression.

您可以尝试我的修改http://jsfiddle.net/bmma8/4/修改输入或点击按钮将更新您的表达。

js:

JS：

MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
});

var myApp = angular.module('myApp',[]);


function MyCtrl($scope, $log) {

    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue

    $scope.Update = function() {
        QUEUE.Push(["Text",MathJax.Hub.getAllJax("MathOutput")[0],"\\displaystyle{"+ $scope.Expression+"}"]);
        //$scope.Expression = 'Updated Expression: \\( \\frac{9}{4} \\div \\frac{1}{6} \\)';
        //MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
    }
    $scope.Expression = 'Original Expression: \\( \\frac{5}{4} \\div \\fra

and html:

和HTML：

 <div ng-controller="MyCtrl">
         <button ng-click="Update()">Update</button>

         <input ng-model="Expression" ng-change="Update()">
         <div id="MathOutput">
         You typed: ${}$
         </div>
 </div>

Alexandre

亚历山大

#8

I actually thought of another solution. When you render some angular and math you do this:

我其实想到了另一个解决方案。当你渲染一些角度和数学时，你会这样做：

ANGULAR CONTROLLER

角控制器

$scope x = 5;

HTML

HTML

<h3> {{ '$ Multiplication = '+ x + ' * 2 =' + (x*2) + '$'}} </h3>

Formated Math Jax result

Formated Math Jax结果

Multiplication = 5 * 2 = 10

乘法= 5 * 2 = 10

The key is to include the dollar signs inside the brackets as text. When Angular renders them, the dollar signs will appear as plain text, but when the Math Jax format comes into action it will recognize the dollar signs and do the magic.

关键是在括号内包含美元符号作为文本。当Angular呈现它们时，美元符号将显示为纯文本，但是当Math Jax格式生效时，它将识别美元符号并执行魔术。

#9

I Build a directive for this....

我为此建立一个指令....

FIDDLE: http://jsfiddle.net/8YkUS/1/

FIDDLE：http：//jsfiddle.net/8YkUS/1/

HTML

HTML

p data-math-exp data-value="math">

p data-math-exp data-value =“math”>

JAVASCRIPT

JAVASCRIPT

 appFlipped.directive("mathExp", function () {
    return {
        scope: {
            value: "="
        },
        link: function (scope, el) {

            var domEl = el[0];
            scope.$watch("value", function (newValue) {

                //nothing to do here
                if (newValue == null || window.MathJax == null)return;

                //update the dom with the new value and pass the hub for styling the equation
                domEl.innerHTML = '`' + newValue + '`';
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, domEl]);
            });
        }
    }
});

#10

I fiddled a bit more on Roney's solution. The display math should be displayed in display mode; with

我对Roney的解决方案进行了一些调整。显示数学应以显示模式显示;同

<script type="math/tex; mode=display">

I added an attribute to the generated span to indicate that.

我在生成的范围中添加了一个属性来表示。

Fiddle is here http://jsfiddle.net/repa/aheujhfq/8/

小提琴在这里http://jsfiddle.net/repa/aheujhfq/8/