Javascript 在AngularJS ng Repeat中实现jQuery hoverZoom

我正试图在我的项目中实施。它在普通的html jquery应用程序中运行良好，但当我尝试在angular应用程序中使用ng repeat运行它时，它会中断

我的猜测是由于DOM和jQuery。我想我必须制定一个指令或什么的

工作守则是：

HTML

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>

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

请导游

---

否：尝试在

上复制代码是，您需要创建一个指令

 .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的选项

我试过你的解决办法。现在这些照片根本没有出现。它们是看不见的。如果我在该区域移动鼠标，在控制台上会显示函数centerImage、mouseleave、函数zoomOut。我正在构建一个JSFIDLE进行尝试。我对angular不太了解，但你的ng重复似乎不起作用。输出中缺少图像路径。看看这个例子：@jmartsch:谢谢你的关注。我会调查的。

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