Question

我正在尝试在我的项目中实现jQuery hoverZoom。它在普通的html jquery应用程序中工作正常，但是当我尝试使用ng-repeat在角度应用程序中运行它时会中断。

我的猜测是由于DOM＆amp; jQuery的。我想我必须创建一个指令或其他东西。

工作代码是：

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

<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>

但是当我将HTML改为：

<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>

显示图像，但悬停效果消失。

请指导。

不：试图复制jsFiddle

上的代码

Answer 1

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

 .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>

根据您的要求，您可以尝试改进此指令以传递hoverZoom的选项。 https://docs.angularjs.org/guide/directive

在AngularJS ng-Repeat中实现jQuery hoverZoom

1 个答案: