的fancybox插件转换成角指令 [英] converting Fancybox plugin to Angular directive
问题描述
我使用的是NG重复位置的URL的iframe {{item.details}}中的每个按钮，该按钮是否工作正常。结果
HTML：
＆LT;一类=各种small_button影无的fancybox NG-HREF ={{item.details}}＆gt;查看详情＆LT; / A＆GT;
问题是创造单击该按钮时的fancybox创建灯箱iframe的指令。我已经尝试通过浏览这些帖子<一个解决这个href=\"http://stackoverflow.com/questions/19127725/trying-to-convert-jquery-plugin-to-angular-directive\">post1和张贴2 以及其他一些，它们是有用的，但不是在这种情况下的溶液中。
的fancybox指令：
app.directive（'的fancybox'，函数（）{
返回{
限制：E， 链接：功能（范围，元素，ATTRS）{ element.fancybox（{
类型：IFRAME，
滚动：'不'，
了maxWidth：800，
了maxHeight：400，
fitToView：真实，
宽度：'70％'，
高度：'70％'，
autoSize的：假的，
closeClick：真实，
openEffect：'无'，
closeEffect：'无'，
来源：功能（电流）{
返回$（current.element）; }
}）;
}
}
}）;
使用jQuery我被调用的fancybox带班。各种和.ad。我想调用的fancybox只采用了棱角分明的方式相同。
原花式jQuery的：
的jQuery（文件）。就绪（函数（）{
//的fancybox窗口脚本
$（各种）。的fancybox（{
类型：IFRAME，
滚动：'不'，
了maxWidth：800，
了maxHeight：400，
fitToView：真实，
宽度：'70％'，
高度：'70％'，
autoSize的：假的，
closeClick：真实，
openEffect：'无'，
closeEffect：'无'，
}）; $（广告）。的fancybox（{
了maxWidth：210，
了maxHeight：140，
fitToView：真实，
宽度：'100％'，
高度：100％，
autoSize的：假的，
closeClick：真实，
openEffect：'无'，
closeEffect：'无'
}）;
}）; //设置关闭
您可以使用：
app.directive（'的fancybox'，函数（）{
返回{
限制：'A'， 链接：功能（范围，元素，ATTRS）{
$（元素）.fancybox（{
类型：IFRAME，
滚动：'不'，
了maxWidth：800，
了maxHeight：400，
fitToView：真实，
宽度：'70％'，
高度：'70％'，
autoSize的：假的，
closeClick：真实，
openEffect：'无'，
closeEffect：'无'
}）;
}
}
}）;
属性限制必须 A （大写），因为在您的示例的指令是一个属性。 电子（大写）是当该指令是一个元素。您可以使用组合：限制：AE。 更多信息
您需要使用 $（元素）.fancybox（{...}）因为的fancybox是一个jQuery插件。
I'm using ng-repeat place a url to an iframe {{item.details}} in each button, which is working correctly.
HTML:
<a class="various small_button shadow none" fancybox ng-href="{{item.details}}">View Details</a>
The problem is creating a directive for fancybox to create a lightbox iframe when the button is clicked. I've attempted to resolve this by viewing these posts post1 and post 2 and a few others, they were helpful but were not a solution in this case.
Fancybox directive:
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);
}
});
}
}
});
With jQuery I was invoking fancybox with classes ".various" and ".ad". I want invoke fancybox the same way only using angular.
Original Fancy 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
You can use:
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'
});
}
}
});
The attribute restrict must be A (uppercase) since in your example the directive is an attribute. E (uppercase) is when the directive is an element. You can use combined: restrict: 'AE'. More information
You need use $(element).fancybox({ ... }) because fancybox is a jquery plugin.
这篇关于的fancybox插件转换成角指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
