AngularJS指令为ElevateZoom jQuery插件 [英] AngularJS Directive for ElevateZoom jQuery Plugin
问题描述
我试图使用 ElevateZoom jQuery插件的角度应用程序内。
I'm trying to use the ElevateZoom jQuery plugin inside an angular app.
从本质上讲，正常使用ElevateZoom，创建一个图片如下：
Essentially, to use ElevateZoom normally, you create an image as follows:
<img id="my-img" src="small.jpg" data-zoom-image="big.jpg" />
然后在你的应用JS：
Then in your application JS:
$('#my-img').elevateZoom(options);
这在一个标准的应用程序工作正常。但是，当我尝试做用指令我AngularJS应用程序（我跟一些SO答案获取jQuery插件进入角与指令），我就是不能使它工作。
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.
在Plunkr 现场演示编辑：<一href=\"http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=$p$pview\">http://plnkr.co/edit/Mu4EOcGtGs7XVDDUvnnB?p=$p$pview
Live editable demo on 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看起来像这样：
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 ;)
推荐答案
您指令：
app.directive('ngElevateZoom', function() {
return {
restrict: 'A',
scope: true,
compile: function(scope, element, attrs) {
$(element).elevateZoom(scope.$eval(attrs.elevateZoom));
}
};
});
记
请即编译功能（tElement，tAttrs，transclude）{...}不要访问范围，所以我猜你试图使用链接功能。
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.
我做了一些变化：
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();
}
};
});
在直接使用数据变焦图像='{{large_image}} ，是造成该elevateZoom试图让从属性的值，它是 {{large_image}}在运行插件 $（元素）.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();
检查更新 Plunker
更新时间：
由于可能有情况下，当ATTRS需要插件的延迟，你需要的 $观察的ATTR，只有当它真正准备好你调用该插件。
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) {
//Will watch for changes on the attribute
attrs.$observe('zoomImage',function(){
linkElevateZoom();
})
function linkElevateZoom(){
//Check if its not empty
if (!attrs.zoomImage) return;
element.attr('data-zoom-image',attrs.zoomImage);
$(element).elevateZoom();
}
linkElevateZoom();
}
};
});
检查更新 plunker
可选
当与美景结合使用这一点，叶插件的分层视图顶部的div后面。下面就来解决这个问题指令
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();
})
}
}
});
这需要被应用到body元素
This directive needs to be applied to the body element
<body zoom-container>
这篇关于AngularJS指令为ElevateZoom jQuery插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
