用于ElevateZoom jQuery插件的AngularJS指令

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

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

然后在你的应用程序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看起来像这样：

我究竟做错了什么？ 我几天只试过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函数。

点击这里

我做了一些改变：

HTML

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

检查更新的Plunker

---

更新

由于可能会出现需要插件的attrs延迟的情况，因此您需要观察 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元素。