Plugin doesn't work within Angular ng-repeat directive

 //Magnific-popup

$(‘.single-popup’).magnificPopup({ type: ‘image’, removalDelay: 300, mainClass: ‘mfp-with-fade’, closeOnContentClick: true });

An example from the site copied/pasted works fine, however anything with a databinded href value that is pathed via ‘…/’ does not work. Instead it routes my site to the home page. There are no additional functions on the images not working.

The code

[tranelch]

Dear friend!

I need some help, please ask a couple of simple questions regarding my new article, here they are http://personal.thetootclassic.com/e4vxck

chris

[aaackerman]

Hi @Bradmartin0905, thank you for posting this issue, as it clarified a few problems I was having with my own AngularJS app. I’m suffering from the same problem with ng-repeat and found a workaround that I thought I would share with you until this is resolved. Many jQuery plugins don’t work with dynamically generated DOM elements (like ng-repeat). I suggest using some sort of $watch along with a $timeout to check when the ng-repeat is loaded, then you initialize magnific-popup.

$scope.$watch("images", function (newValue, oldValue) {
  $timeout(function() {
    $('.gallery').each(function() {
      $(this).magnificPopup({
        delegate: '.image',
        type:'image',
        gallery: {
         enabled: true
        }
     });
    });
  });
});

This isn’t the most elegant solution, but I’m sure it can be improved with time. Good luck figuring it out and hope this helps! I should note, just make sure to have your gallery (or whatever you choose to call it) class outside of the ng-repeat div.

<div class="gallery">
  <div ng-repeat="image in images">
    <a href="{{image.src}}" class="image"><img src="{{image.src}}"></a>
  </div>
</div>