AngularJS: MathJax Binding

Question

MathJax останавливает передачу уравнений после любых изменений модели или маршрута. Мне нужно перезагрузить страницу, чтобы получить латекс.

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>

Answer 2

Простейшие, самые быстрые и надежное решение:

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

Преимущества:

• Простота установки, просто скопируйте этот код.
• Все на вашей странице набирается.
• Он работает намного быстрее, чем другие решения. Это связано с тем, что он может отображать страницу за один раз. Другие ответы здесь ждут завершения одного элемента, пока они не наберут следующий. Это делает рендеринг veeeery медленным, если есть, например, несколько директив mathjax-bind (как предлагает другой ответ). Этот момент является причиной того, что я искал другой ответ.
• Вы все же можете легко исключить элементы, используя опцию «ignoreClass» в настройках mathjax.

Сравнительный анализ: директивы приняли 63 секунд, в то время как с помощью этого метода потребовалось 1.5 секунды для отображения страницы. Я знаю, что эта функция будет выполняться много, так как она вызывается для каждого цикла дайджеста, однако она заметно не замедляет страницу.

Этот ответ был скопирован от here. Все кредиты идут им.