问题描述
限时送ChatGPT账号..我正在尝试在 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屋!
更多推荐
[db:关键词]
发布评论