在AngularJS NG-重复实施jQuery的悬浮缩放 [英] Implementing jQuery hoverZoom in AngularJS ng-Repeat

问题描述

我想实现我的项目 jQuery的悬浮缩放。它工作正常，在正常的HTML jQuery的应用程序，但是当我尝试使用应用程序的角度来运行它NG-重复它打破。

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.

我的猜测是由于DOM和放大器; jQuery的。我想我必须创建一个指令或东西。

My guess is due to DOM & jQuery. I think I have to create a directive or something.

工作code是：

HTML

<link rel="stylesheet" href="assets/css/zoom_style.css?v=2">


<link rel="stylesheet" href="assets/css/jquery.hoverZoom.css">



        <ul class="thumb">

            <li><a href="../api/uploads/bjaim/1.jpg"><img alt="Images can have captions" src="../api/uploads/bjaim/1_thumb.jpg" /></a></li>
            <li class="noborder"><a href="../api/uploads/bjaim/2.jpg"><img alt="zoomContainer can be styled with CSS" src="../api/uploads/bjaim/2_thumb.jpg" /></a></li>
            <li class="redshadow"><a href="../api/uploads/bjaim/3.jpg"><img src="../api/uploads/bjaim/3_thumb.jpg" alt="Images are scaled and centered to the viewport" /></a></li>
            <li><a href="../api/uploads/bjaim/bigimage.jpg"><img src="../api/uploads/bjaim/bigimage_thumb.jpg" alt="Images are preloaded and then the animation starts"/></a></li>
            <li><a href="../api/uploads/bjaim/5.jpg"><img src="../api/uploads/bjaim/5_thumb.jpg" /></a></li>
            <li><a href="../api/uploads/bjaim/6.jpg"><img src="../api/uploads/bjaim/6_thumb.jpg" /></a></li>
            <li><a href="../api/uploads/bjaim/7.jpg"><img src="../api/uploads/bjaim/7_thumb.jpg" /></a></li> 

        </ul>

的JavaScript

Javascript

<script src="assets/js/modernizr-1.6.min.js"></script>
<script src="assets/js/jquery.hoverZoom.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
            $('.thumb img').hoverZoom({speedView:600, speedRemove:400, showCaption:true, speedCaption:600, debug:true, hoverIntent: true, loadingIndicatorPos: 'center'});
    });  
</script>

但是，当我chnage的HTML为：

But when I chnage the HTML to:

<ul class="thumb">
             <li ng-repeat="image in images">
                 <a ng-href="../api/uploads/{{job}}/{{image}}"><img alt="Images can have captions"  ng-src="../api/uploads/{{job}}/{{image}}" /></a>

            </li>
        </ul>

它显示的图像，但悬停效果已经一去不复返了。

It displays the images but hover effect is gone.

请指导。

不：试图复制上的jsfiddle

推荐答案

是的，你需要创建一个指令，

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'});
       }
    };
  });

和在HTML中，

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

根据您的要求，您可以尝试改善这一指令以通为悬浮缩放选项也是如此。 https://docs.angularjs.org/guide/directive

这篇关于在AngularJS NG-重复实施jQuery的悬浮缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！