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.

You should try to not use jQuery with Angular. Try to put your code inside of a directive. http://docs.angularjs.org/guide/directive — jpmorin, Apr 19 '13 at 04:49
Could you please give me a vague idea how to change the jquery to angularjs directive. That would be really great as i don't have any idea how to manipulate html elements. I went through the angular js directive tutorial, but still confused. — , Apr 19 '13 at 17:13

score 3 · Answer 1 · answered Apr 22 '13 at 08:13

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>

score 2 · Accepted Answer · answered Apr 19 '13 at 18:27

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

answered Apr 19 '13 at 18:27

jpmorin

6,008
2
28
39

jQuery click bind with angularjs

2 Answers2

Linked