0

I have the following setup in an angular.js application, basically 3 of the elements in lesson.answers are show to begin with, and the 'Move Right' button scrolls the list. (I can't seem to get it to run in the example window, but the code is simple enough to grok anyway)

(function() {
  var app = angular.module('lessonEditApp');

  app.controller('LessonController', function() {
    this.answers = ['$15$', '$12$', '$10$', '$8$'];
    this.answerPos = 0;
  });
})();
<html ng-app='lessonEditApp'>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body ng-controller='LessonController as lesson'>
    <button ng-click='lesson.answerPos = lesson.answerPos + 1'>Move Right</button>
    <div ng-repeat='answer in lesson.answers | limitTo:3:lesson.answerPos'>
      {{answer}}
    </div>
  </body>
</html>

The trouble is that those answer elements ($15$, $12$, etc) are LaTeX, and need to be marked up by another library (MathJax) after they load, so I need to know when these elements appear.

Looking at other, similar questions, answers generally propose that any extra processing steps can be done when the state changes i.e. onclick of the 'Move Right' button, but MathJax has to be called after the element has actually been rendered in the DOM in order to take effect.

Is there any way within Angular that I can trigger a function to run when elements have actually been created? Ideally it would be attached to each specific element that is shown, but a page-wide trigger would be workable.

wyatt
  • 3,188
  • 10
  • 36
  • 48
  • you might need to step outside of ang for that. mutation observers can work, or something else that causes an event on insertion. working with a legacy system before MOs were viable, i used `` to execute a callback upon DOM insertion of template markup. – dandavis Mar 05 '16 at 12:54
  • 2
    Why don't you use a filter or a directive to process your LaTeX elements before showing them ? See this post http://stackoverflow.com/questions/16087146/getting-mathjax-to-update-after-changes-to-angularjs-model – Captain Mar 05 '16 at 13:01
  • @Captain that's glorious, thank you! I apparently have a fair bit more to learn about angular to understand that, but it works a charm. – wyatt Mar 05 '16 at 16:32

0 Answers0