Question

我正在尝试在我的应用中使用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属性，但结果是相同的，它添加了attribtute，但Fancybox不能将图像识别为同一组的一部分。

感谢任何帮助，谢谢！

Answer 1

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

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

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'
            });
        }
    }
});



<ul class="small-block-grid-6" fancybox>
    <li ng-repeat="file in vm.user.files">
        <a class="fbelements" rel="group" href="{{file.file_url}}"><img src="{{file.file_thumb_url}}" border="0" /></a>
    </li>
</ul>

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 / rel功能正常工作。

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
    }
}

如果你有很多小组，这也会有效....并防止＆＃34;双重事件绑定＆＃34;

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

3 个答案: