Question

我正在尝试在角度应用中使用ElevateZoom jQuery插件。

基本上，要正常使用ElevateZoom，您可以按如下方式创建图像：

<img id="my-img" src="small.jpg" data-zoom-image="big.jpg" />

然后在你的应用程序JS：

$('#my-img').elevateZoom(options);

这在标准应用中运行良好。但是当我尝试使用指令在我的AngularJS应用程序中执行此操作时（我按照一些SO的答案将jquery插件转换为带指令的角度）我无法使其工作。

关于Plunkr的实时可编辑演示：http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview

我的指示如下：

app.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    scope: true,
    compile: function(scope, element, attrs) {
      $(element).elevateZoom(scope.$eval(attrs.elevateZoom));
    }
  };
});

我的HTML看起来像这样：

<img ng-elevate-zoom ng-src="{{small_image}}" data-zoom-image="{{large_image}}" />

我做错了什么？我几天只试过Angular，所以对我很轻松;）

Answer 1

您的指示：

app.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    scope: true,
    compile: function(scope, element, attrs) {
      $(element).elevateZoom(scope.$eval(attrs.elevateZoom));
    }
  };
});

请记住，compile函数（tElement，tAttrs，transclude）{...}无法访问范围，所以我猜你试图使用link函数。

检查here

我做了一些改变：

<强> HTML

<img ng-elevate-zoom
     ng-src="{{small_image}}"
     zoom-image="{{large_image}}" />

<强> JS

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

直接使用data-zoom-image='{{large_image}}'时，导致该elevateZoom尝试从该属性获取值，并且在运行插件时{{large_image}}'$(element).elevateZoom();

enter image description here

检查更新后的Plunker

<强>已更新

由于可能会出现需要插件的attrs延迟的情况，因此您需要$observe attr，并且只有当它实际准备就绪时才会调用该插件。

app.directive('ngElevateZoom', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

      // Watch for changes on the attribute before
      // calling the function.
      attrs.$observe('zoomImage', function() {
        linkElevateZoom();
      });

      function linkElevateZoom() {
        // Check that it's not empty.
        if (!attrs.zoomImage) return;
        element.attr('data-zoom-image',attrs.zoomImage);
        $(element).elevateZoom();
      }

      linkElevateZoom();
    }
  };
});

检查更新后的plunker

<强>可选将此视图与视图结合使用时，插件会在视图顶部留下div。这是解决该问题的指令。

app.directive('zoomContainer', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$on('$routeChangeSuccess', function() {
                var target = element.children('div.zoomContainer').remove();
            });
        }
    };
});

此指令需要应用于body元素。

<body zoom-container>

用于ElevateZoom jQuery插件的AngularJS指令

1 个答案: