☰

AngularJS モデルの変更後に MathJax を更新する 質問する

tag-icon • tag-icon angularjs mathjax
AngularJS モデルの変更後に MathJax を更新する 質問する

私は、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/フィドルでは、更新ボタンを 2 回クリックした後でも元の式が削除されないことに気付くでしょう。これはバグまたは競合のようです。

ベストアンサー1

MathJax と格闘して何日も (場合によっては何週間も) を無駄にしてきたので、数式をリアルタイムで更新する際のさまざまな癖についてはよく知っています。Angular はまったくの初心者ですが、この機会に飛び込んでみることができました。そして、自分の問題を解決するソリューションを見つけることができました。皆さんの悩みも解決してくれることを願っています。

ライブデモ:jsfiddle

Angularが提供する単純な補間を使用する代わりに、私は新しいディレクティブを作成しました。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]]);
            });
        }]
    };
});

おすすめ記事