Implementing JQuery HoverZoom In AngularJS Ng-Repeat

I am trying to implement jQuery hoverZoom in my project. It works fine in a normal html jquery app but when i try to run it in angular app using ng-repeat it breaks. My guess is d

Solution 1:

Yes you need to create a directive,

 .directive('hoverZoom', function() {
    return {
      link: function(scope, element){
           $(element).hoverZoom({speedView:600, speedRemove:400, showCaption:true, speedCaption:600, debug:true, hoverIntent: true, loadingIndicatorPos: 'center'});
       }
    };
  });

And in HTML,

  <a hover-zoom ng-href="../api/uploads/{{job}}/{{image}}"><img alt="Images can have captions"  ng-src="../api/uploads/{{job}}/{{image}}" /></a>

Depending on your requirement you can try to improve this directive to pass the options for hoverZoom as well. https://docs.angularjs.org/guide/directive