angularjs understanding ng-repeat behavior in Modal

11 Views Asked by At

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.

  1. What is happening here?
  2. Why is genQRCode() being called during the primary page load (and the modal hasn't opened yet)?
  3. Why isn't genQRCode() being called at the end of the ng-repeat after the Modal is opened?
  4. 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.

0

There are 0 best solutions below