AngularJS 페이지 매김이 다음 페이지에서 KaTeX를로드 할 수없는 이유는 무엇입니까?

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

동적으로 페이지를 새로 고치지 않고 수학 방정식을 렌더링하려면 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]); 
     }); 
    } 
    }; 
}); 

Answer 2

여기서 문제는 문서 개체가 다시 렌더링되지 않는다는 것입니다. 이 자동 렌더링을 시도 할 수 있습니다. https://github.com/Khan/KaTeX/tree/master/contrib/auto-render

그렇지 않은 경우이 샘플에서는 angularJS와 함께 katax를 사용하는 방법을 시도해보십시오. http://lucasbardella.com/blog/2014/11/katex-angularjs