ng-repeat中的Fancybox指令不是对图像进行分组

我试图在我的应用程序中使用Fancybox ，当插件工作时（它打开灯箱中的图像），它没有识别rel或data-fancybox-group属性来分组多个图像（这样我就可以正确浏览它们了在灯箱里）。

这是我的指示：

app.directive('fancybox', function() { return { restrict: 'A', link: function(scope, element) { $(element).fancybox({ theme : 'dark' }); } }; }); 

以下是我在模板上调用它的方法：

我试图在指令本身设置rel / data-fancybox-group属性，但结果是相同的，它添加了attribtute，但Fancybox不能将图像识别为同一组的一部分。

任何帮助表示赞赏，谢谢！

Answer 1

看起来该指令单独应用于每个元素，因此您最终会得到几个不同的fancybox实例，而不是一个带有分组图像的实例。

我将指令应用于外部元素，然后找到我想要应用fancybox的内部元素，然后像往常一样使用rel =“group”。

 angular.module('myApp').directive('fancybox', function(){ return { restrict: 'A', link: function(scope, element, attrs) { // find the inner elements and apply fancybox to all of them at once var apply_fancybox_to = element.find('a.fbelements'); $(apply_fancybox_to).fancybox({ maxWidth : 800, maxHeight : 400, fitToView : true, width : '70%', height : '70%', autoSize : false, openEffect : 'none', closeEffect : 'none' }); } } }); 
 
  
  

Answer 2

以下列方式解决了这个问题：

 app.directive('fancybox', function() { return { restrict: 'A', link: function(scope, element) { if (scope.$last) setTimeout(function() { $('.fancybox').fancybox({ theme : 'dark' }); }, 1); } }; }); 

添加范围。$ last条件使得只有在加载了所有图像时才应用fancybox（而不是在将每个图像添加到DOM时将其应用于每个图像）。 现在data-group / relfunction正常工作。

Answer 3

这是另一种方法

使用REL属性而不是data-fancybox-group

 app.directive('fancybox', function() { var linker = function(scope,element,attr){ if(scope.$last) { var target = jQuery("[rel='" + attr.rel + "']"); target.fancybox(); } }; return{ restrict : "A", link: linker } } 

如果你有很多组，这也会工作….并防止“双事件绑定”