用于 ElevateZoom jQuery 插件的 AngularJS 指令 [英] AngularJS Directive for ElevateZoom jQuery Plugin
问题描述
我正在尝试在 Angular 应用程序中使用
<小时>更新
由于可能存在插件需要的属性延迟的情况，您需要$observe attr，只有当它真正准备好时，你才调用插件.
app.directive('ngElevateZoom', function() {返回 {限制:'A'，链接:函数(范围，元素，属性){//注意之前属性的变化//调用函数.attrs.$observe('zoomImage', function() {链接ElevateZoom();});函数链接ElevateZoom() {//检查它是否为空.如果 (!attrs.zoomImage) 返回；element.attr('data-zoom-image',attrs.zoomImage);$(元素).elevateZoom();}链接ElevateZoom();}};});检查更新的plunker
可选当将此与视图结合使用时，插件会在视图顶部留下一个分层的 div.这是解决该问题的指令.
app.directive('zoomContainer', function() {返回 {限制:'A'，链接:函数(范围，元素，属性){scope.$on('$routeChangeSuccess', function() {var target = element.children('div.zoomContainer').remove();});}};});此指令需要应用于 body 元素.
I'm trying to use the ElevateZoom jQuery plugin inside an angular app.
Essentially, to use ElevateZoom normally, you create an image as follows:
<img id="my-img" src="small.jpg" data-zoom-image="big.jpg" />
Then in your application 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.
Live editable demo on 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:
<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 ;)
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 compile function (tElement, tAttrs, transclude) { ... } dont have access to scope, so I guess you were trying to use the link function.
Check here
I did some changes:
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();
}
};
});
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();
Check the updated Plunker
UPDATED
Since there could be cases when the attrs need for the plugin are delayed, you'll need to $observe the attr and only when its actually ready you call the plugin.
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
Optional When 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.
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 zoom-container>
这篇关于用于 ElevateZoom jQuery 插件的 AngularJS 指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
