0

我正在使用 jQuery click bind 来进行平滑缩放图像缩放插件。但是使用 angularjs 实现时绑定不起作用。我是 Angular 和 jQuery 的新手。所以请帮忙。

这是我用于缩放的 jQuery 函数。它实际上是在尝试从 href 中检索 image_url。

jQuery(function($){
    $('.zoom_thumbnails').find('li a').each(function (){
        $(this).bind('click', {src: $(this).attr('href')}, function (e){
              $('#zoom_container').smoothZoom('destroy').css('background-image', 'url(css/zoom_assets/preloader.gif)').smoothZoom({
                     image_url: e.data.src,
                      width: '100%',
                      height: '300%',
                   });
               return false;
           });
       }).eq(0).trigger('click');
     });

我的html代码如下。

<div id="zoom_container"></div>
<ul class="zoom_thumbnails">
    <div  ng-repeat="image in zoomImages">
        <li><a href={{image.img}} data-size="500,400">
            <img src={{image.img}} style="height: 15%">
            </a></li>
      </div>
</ul>

我正在使用一个控制器，其中图像存储在数组 zoomImage 中。当我尝试对图像 url 进行硬编码时，它工作正常。但是在使用 ng-repeat 时，绑定不会在 jQuery 中发生。有人请帮我解决这个问题。我尝试将 jQuery 函数放在 html 页面和控制器中。

4

2 回答 2

3

您必须等到 ng-repeat 完成后才能使用 jQuery 来 $('.zoom_thumbnails')。

这是执行此操作的指令（http://jsfiddle.net/tQw6w/）；它在 true 时调用指定的函数：

.directive('repeatDone', function() {
    return function(scope, element, attrs) {
        if (scope.$last) { // all are rendered
            scope.$eval(attrs.repeatDone);
        }
    }
})

和html：

<ul>
    <li ng-repeat="feed in feedList" repeat-done="layoutDone()" ng-cloak>
        <a href="{{feed}}" title="view at {{feed | hostName}}" data-toggle="tooltip">{{feed | strip_http}}</a>
    </li>
</ul>

和控制器中的功能：

$scope.layoutDone = function() {
    $timeout(function() { $('a[data-toggle="tooltip"]').tooltip(); }, 0); // wait...
}

我发现在进行 DOM 操作之前需要使用间隔 = 0 的 $timeout，例如在小提琴中初始化工具提示或缩略图。

顺便说一句，jQuery 与 Angular 配合得很好，只要确保 jQuery 脚本标签出现在 Angular 脚本标签之前：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
于 2013-04-22T08:13:38.253 回答
2

我不知道你的平滑缩放功能，但你可以看一下这个演示，以获得从缩略图图像切换容器背景图像的指令示例。

链接：Plunker 演示

于 2013-04-19T18:27:02.050 回答