fancybox指令未对图像进行分组

我已经为花式盒子创建了指令。它在花式框中打开图像，而不是对图像进行分组。我在Fancybox指令中检查了另一个解决方案，ng repeat不是对图像进行分组，但它们不会解决我的问题。

HTML:

<a fancybox class="fancybox" rel="group" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="{[{i.location}]}" title="{[{i.name}]}" width="460" height="298">
## Image ###<img src="{[{i.location}]}" alt="" width="460" height="298" />
</a>

JS花式盒子指令：：

 App.directive('fancybox',function($compile, $timeout){
        return {
            link: function($scope, element, attrs) {
                alert('i am called');
                   element.fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
                    padding : 40,
                    margin : [20, 60, 20, 60] ,// Increase left/right margin
                    helpers: {
                    thumbs: {
                        width  : 40,
                        height : 40,
                        source  : function(current) {
                            return $(current.element).data('thumbnail');
                            }
                        }
                   },
                });
            }
         };
    });