CODEWITHSUNDEEP
jqueryangularjs
Rajeev
Rajeev

Reputation: 1113

jquery Image Wheelzoom with angularjs not working

I am using jquery wheelzoom for image zoom functionality. It works fine with without angular but not working when I use images in angular repeater.

Upvotes: 0

Views: 503

Answers (1)

ilmgb
ilmgb

Reputation: 770

EDIT

I finally got it working through a directive.

Description: It is a timing issue. When you call the document.querySelectorAll inside the controller - only one image is available at that time (the one outside your ng-repeat). Then the ng-repeat runs and adds further images to the DOM - but they haven't made it through the wheelzoom call.

I have added this directive, which directly has access to the DOM element itself and calls wheelzoom on it.

app.directive('bsWheelzoom', function() {
  return {
    link: function(scope, elem, attrs) {
      wheelzoom(elem[0]);
    }
  }
})

The usage in the HTML is

<div data-ng-repeat="d in data" style="width: 300px">
      <img class="imgInsideOfAngular" ng-src="{{d.img}}" alt="{{d.title}}" width="100%" bs-wheelzoom/>
    </div>

Workin Plnkr

http://plnkr.co/edit/ZjKfqKHGmCvP3LLxH0eg?p=preview

OLD

As your wheelzoom() call is outside the angular world, you need to call $scope.$apply().

The angular documentation states:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the angular framework we need to perform proper scope life-cycle of exception handling, executing watches

This fixes your issue:

$scope.$apply(function() {
    wheelzoom(document.querySelectorAll('img.aa'));
})

See this working fiddle: http://jsfiddle.net/jeqtxp65/

Upvotes: 3

Related Questions