javascript - AngularJS:MathJax 绑定(bind)

Question

MathJax 在对模型或路线进行任何更改后停止渲染方程式。我需要重新加载页面以使 latex 渲染正确。

HTML:

<div class = "qanda" ng-model = "item">
        <ul>
              <label class="formgroup">
              <input type="radio" name = "q" >
              {{item.val}}
             </label>
             </li>
        </ul>
</div>

JS:

$scope.item = {
       "val":"Look intp \\[\\] $ \\lim\\limits_{x \\to 5} \\large\\frac{4x+b}{cx+9}$"
}

如何解决这个问题？!

Answer 1

你可以创建一个简单的指令，当源改变时刷新渲染，即:

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

module.directive('mathJaxBind', function() {
  var refresh = function(element) {
      MathJax.Hub.Queue(["Typeset", MathJax.Hub, element]);
  };
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.mathJaxBind, function(newValue, oldValue) {
        element.text(newValue);
        refresh(element[0]);
      });
    }
  };
});
module.controller('MainCtrl', function($scope){
  $scope.equation = "When $a ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$";
});

<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"></script>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>

<div ng-app="test" ng-controller="MainCtrl">
  <textarea ng-model="equation"></textarea>
  <p math-jax-bind="equation"></p>
</div>