在更改AngularJS模型后获取MathJax更新

Question

我正在尝试使用包含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} \\)';

}

这是我的HTML：

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

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

Answer 1

与MathJax浪费了很多天（也许是几周）之后，我对它的各种怪癖都非常熟悉，可以实时更新数学表达式。我是Angular的新手，但这为我提供了一个很好的机会，最终我找到了解决我的问题的解决方案-
希望它也能解决您的问题。

现场演示： jsfiddle

而不是使用普通的插即角提供的，我创建了一个基于新的指令ng- bind叫mathjax-bind。

如果expression是包含数学代码的变量，则\( {{expression}} \)可以编写以下代码：

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

并将在适当的时间排版和更新所有内容。

该指令的支持代码如下：

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