ng-repeat 中的 Fancybox 指令不分组图像 [英] Fancybox directive in ng-repeat is not grouping images

问题描述

我正在尝试在我的应用程序中使用 Fancybox 并且在插件工作时(它打开图像在灯箱中)，它无法识别 rel 或 data-fancybox-group 属性来对多个图像进行分组(以便我可以在灯箱中直接浏览它们).

这是我的指令:

app.directive('fancybox', function() {返回 {限制:'A'，链接:函数(范围，元素){$(元素).fancybox({主题:黑暗"});}};});

这是我在模板上调用它的方式:

<a ng-href="/data/img/{{img}}" data-fancybox-group="gallery"fancybox><img ng-src="/data/img/th-{{img}}"></a></图>

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

感谢任何帮助，谢谢！

解决方案

解决方法如下:

app.directive('fancybox', function() {返回 {限制:'A'，链接:函数(范围，元素){if (scope.$last) setTimeout(function() {$('.fancybox').fancybox({主题:黑暗"});}, 1);}};});

添加 scope.$last 条件使得fancybox 仅在所有图像都已加载时应用(而不是在将其添加到DOM 时将其应用到每个图像).现在 data-group/rel 函数起作用了.

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).

Here is my directive:

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>

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.

Any help is appreciated, thanks!

解决方案

Solved it in the following manner:

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

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-repeat 中的 Fancybox 指令不分组图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！