获取MathJax更改AngularJS模型后更新 [英] Getting MathJax to update after changes to AngularJS model

问题描述

我想使用AngularJS双向绑定的文本，其中包括乳胶风格的方程。我想打电话给MathJax格式化方程，但我不知道，以确保完成AngularJS改变模型后MathJax被称为最好的办法。我想我需要一个回调。这里是我的JavaScript：

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:

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} \\)';

}

这是我的HTML：

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

小提琴是在这里： http://jsfiddle.net/LukasHalim/UVjTD/1/ 。点击更新按钮，即使经过两次你会发现，在小提琴不会被删除原来的前pression - 似乎是一个错误或冲突

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.

推荐答案

已经浪费了很多天（也许周）战斗MathJax，我太熟悉它在飞行更新数学EX pressions各种怪癖。我是全新的，以角但是这给了我一个很好的机会，潜水和我结束了它解决了我的问题的解决方案 - 希望它会解决你以及

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.

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

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

而不是使用纯插值的角度提供的，我创建了一个基于 新指令NG-绑定 名为 mathjax绑定。

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

如果前pression 是包含数学code变量，然后代替的\\（{{前pression }} \\）你可以写：

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

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

和一切都将被排版，并在适当的时候进行更新。

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

支撑code的指令如下：

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

这篇关于获取MathJax更改AngularJS模型后更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！