Question

在AngularJS分页中，我使用KaTeX JavaScript库进行数学方程式。

问题：当我要进入下一页的分页时，库无效。请帮助我理解，我做错了什么？这是我的app.js和index.html代码。这是我的app.js.

var app = angular.module('app', ['ngRoute', 'bw.paging', 'paging', 
'katex']);  
app.controller('homeCtrl', ['$scope', '$http', function($scope, $http)
{  
$scope.yo= {  
    'opted' : '',  
}  
$scope.var = 7;  
$scope.equations = [{'name' : 'Integration', 'notation' : '\\(k_{n+1} 
= n^2 + k_n^2 - k_{n-1}\\)'},  
                    {'name' : 'Summation', 'notation' : 
'90${}^\\circ$'},  
                    {'name' : 'Union', 'notation' : '\\(ax^2 + bx + c 
= 0\\)'},  
                    {'name' : 'integration', 'notation' : 
'$f(x)=a_0+\\int^{\\infty }_{n=1}{(a_n{\\mathrm{cos} \\frac{n\\pi x}
{L}\ }+b_n{\\mathrm{sin} \\frac{n\\pi x}{L}\\ })}$'},  

];  
  $scope.submitTest = function(questions){  
        var marks =0;  
        for(var i =0;i < questions.length; i++){  
            console.log(questions[i].opted);  
            console.log('hi');  
            if(questions[i].correct_options == questions[i].opted)
                marks = marks +1;  
        }  
        console.log(marks);  
    };  


$scope.currentPage = 0;  
$scope.pageSize = 1;  
$scope.data = [];  
$scope.q = '';  


$scope.numberOfPages=function(){  
    return Math.ceil($scope.equations.length/$scope.pageSize);                  
}  


}]);  

//We already have a limitTo filter built-in to angular,  
//let's make a startFrom filter  
app.filter('startFrom', function() {  
    return function(input, start) {  
        start = +start; //parse to int  
        return input.slice(start);  
    }  
  });  

this is my index.html  
 <div ng-repeat="item in equations | filter:q | 
  startFrom:currentPage*pageSize | limitTo:pageSize">  
      <katex auto-render ng-bind="item.notation"></katex>  
    </div>  
    <button ng-disabled="currentPage == 0" ng-
 click="currentPage=currentPage-1">  
        Previous
    </button>  
    {{currentPage+1}}/{{numberOfPages()}}  
    <button ng-disabled="currentPage >= equations.length/pageSize - 1" 
 ng-click="currentPage=currentPage+1">  
        Next
    </button>

Answer 1

这里的问题是文档对象没有重新渲染。您可以尝试此自动渲染。 https://github.com/Khan/KaTeX/tree/master/contrib/auto-render

否则，请尝试使用带有angularJS的katax的此示例摘录。 http://lucasbardella.com/blog/2014/11/katex-angularjs

Answer 2

动态渲染数学方程式而不刷新页面我使用了MathJax的主处理队列。使用MathJax.Hub.Queue（）将回调推送到此队列。

app.directive('mathjax',function(){
return {
    restrict: 'EA',
    link: function($scope, attrs) {
        $scope.$watch(attrs.ngModel, function () {
            MathJax.Hub.Queue(['Typeset',MathJax.Hub]);
        });
     }
   };
});

为什么AngularJS分页无法在下一页加载KaTeX？

2 个答案: