jQuery click bind with angularjs

Question

I am using jQuery click bind for smoothzoom image zoom plugin. But binding is not working when implemented with angularjs. I am new to angular and jQuery. So please help.

This is my jQuery function for zoom. It is actually trying to retrieve image_url from href.

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

My html code is below.

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

I am using a controller in which images are stored in a array zoomImage. When i am trying to hardcode the image url it is working fine. But while using ng-repeat the binding does not happen in jQuery. Some one please help me solving this issue. I tried placing jQuery function inside html page as well as the controller.

Answer 1

You must wait until ng-repeat has completed before using jQuery to $('.zoom_thumbnails').

Here is a directive for doing that ( http://jsfiddle.net/tQw6w/ ); it calls a specified function when true:

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

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

and the function in the controller:

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

I have found that $timeout with interval=0 before doing DOM manipulation is required, like initializing tooltips in the fiddle, or your thumbnails.

And by the way, jQuery works great with Angular, just be sure the jQuery script tag appears BEFORE the Angular script tag:

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

Answer 2

I do not know about your smooth-zoom function, but you can have a look a this demo for a directive exemple for switching a container background-image from a thumbnail image.

Link: Plunker Demo