I am confused and need assistance understanding how ng-repeat works in a modal. I have combed through multiple other threads and posts seemingly related to my question but none of them have helped me understand whats happening underneath.
I have a page with a modal on it, the modal doesn't open unless a user clicks a button on the main page. In the modal is an ng-repeat; when the ng-repeat is done I need to call a function that attaches a <canvas> to a DIV in each of the elements created by the ng-repeat. In the ng-repeat, the function call to generate the canvas's needs to be triggered AFTER the HTML is rendered using a ng-init="$last && genQRCode()"
MODAL
<div ng-repeat="ticket in club.tickets" ng-init="$last && genQRCode()">
<div id="ticketID_{{ticket.ticketID}}">
... genQRCode() will create the <canvas> and attach it here ...
</div>
</div>
When the main page loads though, I am seeing the genQRCode() function being called - even if the modal is never opened. As a result, the <canvas>s are generated but can't attach to the DIVs because the Modal ng-repeat hasn't generated them yet. And when the modal is opened, the DIVs are created - but the genQRCode() is never called and thus no canvas's are attached to the newly created DIVs.
I am using ng-repeat with ng-init="$last && someFunction()" in other areas of my code and they all execute and display just fine. But inside of a modal everything is not working as expected.
- What is happening here?
- Why is
genQRCode()being called during the primary page load (and the modal hasn't opened yet)? - Why isn't
genQRCode()being called at the end of the ng-repeat after the Modal is opened? - What is the best way to manage this - as I need the
genQRCode()function called AFTER the ng-repeat has rendered the DIVs to the DOM?
Thaks.