在NG-重复的fancybox指令不分组图像 [英] Fancybox directive in ng-repeat is not grouping images

问题描述

我想我的应用程序中使用的fancybox 虽然该插件（它打开图像在灯箱），它是不承认的REL或数据的fancybox组属性组多个图像（这样我就可以直接在收藏夹进行浏览）。

I am trying to use Fancybox within my app and while the plugin works (it opens the images in the lightbox), it is not recognizing the rel or data-fancybox-group attribute to group multiple images (so that I can navigate through them right in the lightbox).

下面是我的指令：

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

这是我如何调用它的模板：

And here is how I invoke it on the template:

<figure ng-repeat="img in event.imagenes">
    <a ng-href="/data/img/{{img}}" data-fancybox-group="gallery" fancybox>
        <img ng-src="/data/img/th-{{img}}">
    </a>
</figure>

我试着设置指令本身的REL /数据的fancybox组属性，但结果​​是一样的，它增加了attribtute但的fancybox无法识别图像作为同一组的一部分。

I've tried to set the rel/data-fancybox-group attribute in the directive itself but the result is the same, it adds the attribtute but Fancybox doesn't recognize the images as part of the same group.

任何帮助是AP preciated，谢谢！

Any help is appreciated, thanks!

推荐答案

通过以下方式解决它：

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

添加的范围。$最后一个条件使得它如此，当所有的图像被加载仅施加的fancybox（而不是因为它是被添加到DOM它应用到每一个图像）。现在，数据组/ REL功能工作。

Adding the scope.$last condition makes it so that the fancybox is applied only when all the images have been loaded (as opposed to applying it to each image as it is being added to the DOM). Now the data-group/rel function works.

这篇关于在NG-重复的fancybox指令不分组图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！