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

问题描述：

在AngularJS分页中，我使用KaTeX JavaScript库进行数学方程。为什么AngularJS分页无法在下一页加载KaTeX？

问题：当我要进入分页的下一页时，库不工作。请帮我理解，我做错了什么？这里是我的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>

你需要显示的代码的一些部分，以提供一个答案 – Kalamarico

我已经添加了代码。请检查我犯错的地方。 –

答

动态呈现数学方程式而无需刷新页面我使用了一个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]); 
     }); 
    } 
    }; 
});

答

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

否则，试试这个示例摘录，使用katax与angularJS。 http://lucasbardella.com/blog/2014/11/katex-angularjs

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

相关推荐