26

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

4

10 に答える 10

36

MathJax と戦って何日も (場合によっては数週間も) 無駄にしてきた私は、その場で数学式を更新するというさまざまな癖に慣れ親しんでいます。私はAngularを初めて使用しますが、これは私に飛び込む良い機会を与えてくれ、私の問題を解決する解決策にたどり着きました-うまくいけば、あなたの問題も解決するでしょう.

ライブデモ: jsfiddle

ng-bindAngular が提供する単純な補間を使用する代わりに、 calledに基づく新しいディレクティブを作成しました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]]);
            });
        }]
    };
});
于 2013-05-20T09:42:24.950 に答える
13

最も簡単、最速、最も安定したソリューション:

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

利点:

  • このコードをコピーするだけで簡単にセットアップできます。
  • ページのすべてがタイプセットされます。
  • 他のソリューションよりもはるかに高速にレンダリングされます。これは、一度にページをレンダリングできるためです。ここでの他の回答は、次の項目をタイプセットするまで、1 つの項目が終了するのを待ちます。たとえば、複数のmathjax-bindディレクティブがある場合（別の回答が示唆するように）、レンダリングが非常に遅くなります。この点が、私が別の答えを探していた理由です。
  • mathjax 設定でオプション「ignoreClass」を使用して、要素を簡単に除外できます。

ベンチマーク: 100 個のmathjax-bindディレクティブで63 秒かかりましたが、この方法ではページのレンダリングに1.5 秒かかりました。この関数はダイジェスト サイクルごとに呼び出されるため、頻繁に実行されることはわかっていますが、ページの速度が著しく低下することはありません。

于 2016-11-14T13:41:40.370 に答える
7

Ben Alpert の回答を拡張する簡単なフィドルを作成しました。これがフィドルとプランクです。

具体的には、Mathjax で変換するテキストの一部しかない場合は、これを使用できます。インライン mathjax の場合は、テキストを $ で囲む必要があり、ブロック表示の場合は、ブロックを $$ で囲む必要があります。(対応する正規表現を作成すれば、好きな形式を使用できます)

app.js

MathJax.Hub.Config({
    skipStartupTypeset: true,
    messageStyle: "none",
    "HTML-CSS": {
        showMathMenu: false
    }
});
MathJax.Hub.Configured();
var myApp = angular.module("myApp", []);
myApp.directive("mathjaxBind", function() {
    return {
        restrict: "A",
        scope:{
            text: "@mathjaxBind"
        },
        controller: ["$scope", "$element", "$attrs", function($scope, $element, $attrs) {
            $scope.$watch('text', function(value) {
                var $script = angular.element("<script type='math/tex'>")
                    .html(value == undefined ? "" : value);
                $element.html("");
                $element.append($script);
                MathJax.Hub.Queue(["Reprocess", MathJax.Hub, $element[0]]);
            });
        }]
    };
});
myApp.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
          html = html.replace(/\$\$([^$]+)\$\$/g, "<span class=\"blue\" mathjax-bind=\"$1\"></span>");
          html = html.replace(/\$([^$]+)\$/g, "<span class=\"red\" mathjax-bind=\"$1\"></span>");
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});
function MyCtrl($scope, $element) {    
    $scope.html = "A coin of is $ \\frac{5}{4} $ thrown $$\\frac{1}{6}$$ dfv";
}

index.html

<!DOCTYPE html>
<html ng-app="myApp">    
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntil=configured&dummy=.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <div ng-controller="MyCtrl">
     <input type="text" ng-model="html"/><br/>
     <div dynamic="html"></div>
  </div>
</body>

スタイル.css

input[type="text"] {
    width: 800px;
}
.red{
    color:red;
    display:inline-block;
}
.blue{
    color:blue;
    display:block;
}
于 2014-10-11T12:29:57.500 に答える
2

簡単な解決策は、$timeout を使用MathJax.Hub.Queue(["Typeset", MathJax.Hub])してブラウザーのイベント キューに入れることです ( DOM のレンダリングが終了した後にディレクティブを実行するを参照してください)。

このようなもの：

            var app = angular.module('myApp', []);
            app.controller('myController', function ($scope, $timeout) {
                controller = this;

                $scope.Update = function () {
                    $scope.value = " \\( \\frac{5}{4} \\div \\frac{1}{6} \\)";
                    $timeout(controller.updateMathJax, 0);
                }

                this.updateMathJax = function () {
                    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
                }
            });
于 2015-05-01T13:41:40.447 に答える
1

http://jsfiddle.net/pz5Jc/を見てください

あなたのテンプレートで：

    {{Label}} <span id="mathElement">{{Expression}}</span>

コントローラーで:

$scope.Update = function() {
    $scope.Expression = '\\frac{9}{4} \\div \\frac{1}{6}';
    $scope.Label = 'Updated Expression:'
    var math = MathJax.Hub.getAllJax("mathElement")[0];
    math.Text('\\frac{4}{4} \\div \\frac{2}{6}');
}

ポイントのカップル:

私は mathjax にはあまり詳しくありませんが、

  • 式からラベルを分割すると、式を直接操作できます。
  • 式を強制的に更新するには、DOM 要素を手動で選択する必要があります。残念ながら、これは非常に「角度のある」方法ではありませんが、mathjax が式を解析する (そしてそれ自身の DOM 要素を挿入する) とき、それらの要素を角度のあるバインディングの外にプッシュします。
  • ここでの修正は、正しい mathjax 要素を具体的に選択し、テキスト変更関数を呼び出して式を更新することです。
于 2013-04-18T21:23:00.020 に答える
0

このためのディレクティブを作成します....

フィドル: http://jsfiddle.net/8YkUS/1/

HTML

p data-math-exp data-value="math">

ジャバスクリプト

 appFlipped.directive("mathExp", function () {
    return {
        scope: {
            value: "="
        },
        link: function (scope, el) {

            var domEl = el[0];
            scope.$watch("value", function (newValue) {

                //nothing to do here
                if (newValue == null || window.MathJax == null)return;

                //update the dom with the new value and pass the hub for styling the equation
                domEl.innerHTML = '`' + newValue + '`';
                MathJax.Hub.Queue(["Typeset", MathJax.Hub, domEl]);
            });
        }
    }
});
于 2014-07-03T05:38:47.780 に答える
0

私は実際に別の解決策を考えました。角度と数学をレンダリングするときは、次のようにします。

アンギュラーコントローラー

$scope x = 5;

HTML

<h3> {{ '$ Multiplication = '+ x + ' * 2 =' + (x*2) + '$'}} </h3>

フォーマットされた Math Jax の結果

乗算 = 5 * 2 = 10

重要なのは、括弧内にテキストとしてドル記号を含めることです。Angular がそれらをレンダリングすると、ドル記号はプレーン テキストとして表示されますが、Math Jax 形式が実行されると、ドル記号が認識されて魔法が実行されます。

于 2014-05-27T17:20:55.533 に答える
0

Roneyのソリューションをもう少しいじりました。表示演算は表示モードで表示する必要があります。と

<script type="math/tex; mode=display">

それを示すために、生成されたスパンに属性を追加しました。

フィドルはこちらhttp://jsfiddle.net/repa/aheujhfq/8/

于 2015-02-12T21:13:56.443 に答える