我使用 ng-repeat
将 url 放置到每个按钮中的 iframe {{item.details}},即工作正常。
HTML:
<a class="various small_button shadow none" fancybox ng-href="{{item.details}}">View Details</a>
问题是为 fancybox
创建指令,以便在单击按钮时创建 lightbox iframe
。我尝试通过查看这些帖子 post1 来解决此问题和 post 2和其他一些人,他们很有帮助,但不是这种情况下的解决方案。
Fancybox 指令:
app.directive('fancybox', function(){
return{
restrict: 'e',
link: function(scope, element, attrs){
element.fancybox({
type :'iframe',
scrolling : 'no',
maxWidth : 800,
maxHeight : 400,
fitToView : true,
width : '70%',
height : '70%',
autoSize : false,
closeClick : true,
openEffect : 'none',
closeEffect : 'none',
source :function(current){
return $(current.element);
}
});
}
}
});
使用 jQuery,我使用类“.various”和“.ad”调用 fancybox
。我想仅使用 Angular 以相同的方式调用fancybox
。
原始花式 jQuery:
jQuery(document).ready(function(){
//fancybox window script
$(".various").fancybox({
type :'iframe',
scrolling : 'no',
maxWidth : 800,
maxHeight : 400,
fitToView : true,
width : '70%',
height : '70%',
autoSize : false,
closeClick : true,
openEffect : 'none',
closeEffect : 'none',
});
$(".ad").fancybox({
maxWidth : 210,
maxHeight : 140,
fitToView : true,
width : '100%',
height : '100%',
autoSize : false,
closeClick : true,
openEffect : 'none',
closeEffect : 'none'
});
});//set up close
最佳答案
您可以使用:
app.directive('fancybox', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
$(element).fancybox({
type :'iframe',
scrolling : 'no',
maxWidth : 800,
maxHeight : 400,
fitToView : true,
width : '70%',
height : '70%',
autoSize : false,
closeClick : true,
openEffect : 'none',
closeEffect : 'none'
});
}
}
});
属性restrict
必须是A
(大写),因为在您的示例中指令是一个属性。 E
(大写)表示指令是一个元素。您可以使用组合:restrict: 'AE'
。 More information
您需要使用 $(element).fancybox({ ... })
因为 fancybox 是一个 jquery 插件。
关于jquery - 将 Fancybox 插件转换为 Angular 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29324501/