ng-repeat中的Fancybox指令未将图像分组

debugcn 发表于 Dev

霍尔斯

我正在尝试在我的应用程序中使用Fancybox，而插件正常工作（它将在灯箱中打开图像），但无法识别rel或data-fancybox-group属性来对多个图像进行分组（以便我可以正确地浏览它们）在灯箱中）。

这是我的指令：

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

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

<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 / data-fancybox-group属性，但结果是相同的，它添加了属性，但Fancybox无法将图像识别为同一组的一部分。

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

霍尔斯

通过以下方式解决：

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

添加scope。$ last条件使其仅在加载所有图像时才应用fancybox（与将其添加到DOM时将其应用于每个图像相反）。现在，数据组/ rel函数起作用了。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。