Safe way to execute JQuery-Code after Angular has finished loading

Hey folks,

I am trying to extend the registration form rendering by an option that enables /disables the visibility of the open slots “ [5 places open]” of the items that have a limit. I wrote a plugin that injects a JS-file when a certain registration form ist loaded where this new setting is enabled. So far everything works fine.

However, I am struggling to find a reliable way to determine when Angular has finished rendering of the registration form.

Currently, I am using
rootscope = angular.element(document.querySelector('[ng-app=nd]')).scope().$root; rootscope.$on('$includeContentLoaded', function() { ...}
to execute some code when some angular content is loaded. However, for some reason this does work for some, but not for radio buttons on Safari. On Firefox this does not work at all.

Another approach is to make use of DOMSubtreemodified (i.e. check if there is the string I want to hide in the modified part of the DOM), but this brute force method is very bad performance-wise as well as we run into an endless recursion when we want to hide multiple open slot descriptions.

The best approach would be to use a signal (currently I am using signals.rh.before_process to inject the .js) or something similar only fired when Angular is done with its job. Then we can get rid of the descriptions in a single blow.

Do you guys have an idea? Changing the business logic / templates inside indico to allow for this option seems a bit of a hassle so we’d like to outsource this in a plugin.

I understand that angular will be gone sooner or later… but I’d love a solution anytime soon.


Maybe using the indico:registration-form-loaded event helps? Check our site access plugin for an example.