jquery - 将 Jquery Image Zoom Plugin 与 Angular js 集成的正确方法是什么？

Question

我已经制定了集成提升缩放插件的指令

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

html代码是

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

该插件在此页面中工作正常，但当我导航到其他页面时，该插件仍在初始化并导致一些问题。您能否向我提供一些如何从其他页面删除此插件的建议或有关此插件使用的一些解决方案。我还附上了此插件初始化后其他页面的屏幕截图。

Answer 1

是的，可以通过在销毁指令范围时销毁实例化对象来解决，如下例所示。

.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();
      });
    }
  };
});