javascript 用于 ElevateZoom jQuery 插件的 AngularJS 指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21353124/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS Directive for ElevateZoom jQuery Plugin
提问by Pete Hamilton
I'm trying to use the ElevateZoomjQuery plugin inside an angular app.
我正在尝试在 angular 应用程序中使用ElevateZoomjQuery 插件。
Essentially, to use ElevateZoom normally, you create an image as follows:
本质上，要正常使用 ElevateZoom，您可以按如下方式创建图像：
<img id="my-img" src="small.jpg" data-zoom-image="big.jpg" />
Then in your application JS:
然后在您的应用程序 JS 中：
$('#my-img').elevateZoom(options);
This works fine in a standard app. But when I try and do it in my AngularJS app using a directive (I followed some SO answers for getting jquery plugins into angular with directives) I just can't make it work.
这在标准应用程序中工作正常。但是，当我尝试使用指令在我的 AngularJS 应用程序中执行此操作时（我遵循了一些 SO 答案将 jquery 插件转换为带有指令的 angular ），我就是无法让它工作。
Live editable demo on Plunkr: http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview
Plunkr 上的实时可编辑演示：http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=preview
My directive looks like:
我的指令看起来像：
app.directive('ngElevateZoom', function() {
return {
restrict: 'A',
scope: true,
compile: function(scope, element, attrs) {
$(element).elevateZoom(scope.$eval(attrs.elevateZoom));
}
};
});
And my HTML looks like this:
我的 HTML 如下所示：
<img ng-elevate-zoom ng-src="{{small_image}}" data-zoom-image="{{large_image}}" />
What am I doing wrong? I've only been experimenting with Angular a few days so go easy on me ;)
我究竟做错了什么？我只用了几天 Angular，所以放轻松吧；)
回答by dimirc
Your directive:
您的指令：
app.directive('ngElevateZoom', function() {
return {
restrict: 'A',
scope: true,
compile: function(scope, element, attrs) {
$(element).elevateZoom(scope.$eval(attrs.elevateZoom));
}
};
});
Keep in mind that compilefunction (tElement, tAttrs, transclude) { ... } dont have access to scope, so I guess you were trying to use the linkfunction.
请记住，compilefunction (tElement, tAttrs, transclude) { ... } 无权访问范围，所以我猜您是在尝试使用该link函数。
Check here
在这里查看
I did some changes:
我做了一些改变：
HTML
HTML
<img ng-elevate-zoom
ng-src="{{small_image}}"
zoom-image="{{large_image}}" />
JS
JS
app.directive('ngElevateZoom', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.attr('data-zoom-image',attrs.zoomImage);
$(element).elevateZoom();
}
};
});
When using directly data-zoom-image='{{large_image}}', was causing that elevateZoom to try to get the value from that attribute and it was '{{large_image}}' at the time of running the plugin $(element).elevateZoom();
直接使用时data-zoom-image='{{large_image}}'，导致 elevateZoom 尝试从该属性获取值，并且在运行插件时为 '{{large_image}}'$(element).elevateZoom();
Check the updated Plunker
检查更新的Plunker
UPDATED
更新
Since there could be cases when the attrs need for the plugin are delayed, you'll need to $observethe attr and only when its actually ready you call the plugin.
由于可能存在插件需要的属性被延迟的情况，您需要$observeattr 并且只有当它真正准备好时才调用插件。
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();
}
};
});
Check the updated plunker
检查更新的plunker
OptionalWhen using this in conjunction with views, the plugin leaves behind a div layered on top of the view. Here's a directive to solve that issue.
可选当它与视图结合使用时，插件会在视图顶部留下一个分层的 div。这是解决该问题的指令。
app.directive('zoomContainer', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$on('$routeChangeSuccess', function() {
var target = element.children('div.zoomContainer').remove();
});
}
};
});
This directive needs to be applied to the body element.
该指令需要应用于 body 元素。
<body zoom-container>
