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

问题描述

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

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

}

这是我的 HTML:

<button ng-click="Update()">更新</button>{{表达}}

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

解决方案

在与 MathJax 的斗争中浪费了很多天(甚至可能是几周)，我非常熟悉它在动态更新数学表达式方面的各种怪癖.我是 Angular 的新手，但这给了我一个深入研究的好机会，我最终得到了一个解决我的问题的解决方案——希望它也能解决你的问题.

现场演示:jsfiddle

<小时>

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

如果 expression 是一个包含数学代码的变量，那么你可以这样写:

<span mathjax-bind="表达式"></span>

一切都会在适当的时候排版和更新.

指令的支持代码如下:

myApp.directive("mathjaxBind", function() {返回 {限制:A"，控制器: ["$scope", "$element", "$attrs",函数($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]]);});}]};});

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

}

And here is my 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.

解决方案

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.

Live demo: jsfiddle

---

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

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.

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

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