CODEWITHSUNDEEP
jqueryangularjs
bittu
bittu

Reputation: 347

What is the correct way of integrating Jquery Image Zoom Plugin with angular js?

I have made a directive to integrate elevate zoom plugin 

.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.attr('data-zoom-image',attrs.zoomImage);
      $(element).elevateZoom();
    }
  };
});

and the html code is 

<div id="gallery-1" class="product-thumbs">
              <a class="active" href="#" data-image="images/product/productd-1.jpg"  data-zoom-image="images/product/zoom/productd-1.jpg">
                <img src="images/product/thumb/productd-1.jpg" alt="productd-1">
              </a>
              <a href="#" data-image="images/product/productd-1.jpg"  data-zoom-image="images/product/zoom/productd-1.jpg">
                <img src="images/product/thumb/productd-1.jpg" alt="productd-1">
              </a>
            </div>
            <div class="product-display">
              <img id="zoom-1" src="images/product/productd-1.jpg" ng-elevate-zoom data-zoom-image="images/product/zoom/productd-1.jpg" alt="productd-1">
            </div>

The plugin is working fine in this page but when i navigate to other pages the plugin is still initialized and causing some problems. Can you provide me some suggestion how to remove this plugin from other pages or some solution regarding this usage of plugin.I have also attached screen shot of other pages after this plugin has been initialized.

plugin on another pages

Upvotes: 2

Views: 1261

Answers (1)

ngLover
ngLover

Reputation: 4588

ya it can be solved with destroying the instantiated object on destroy of your directive scope like given below example.

.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    scope:{}
    link: function(scope, element, attrs) {
      element.attr('data-zoom-image',attrs.zoomImage);
      $(element).elevateZoom();
      // destroy your objects
      scope.$on('$destroy', function() {
           $('.zoomContainer').remove();
      });
    }
  };
});

Upvotes: 1

Related Questions