Angular + Fancybox：overlay＆amp;箭头未显示

Question

我在网上寻找解决方案，但我找不到它。

我创建了一个显示fancybox的指令，但叠加和箭头没有显示。 像动画这样的功能似乎运作良好。

这是我的指示：

app.directive('fancybox',function(){
    return {
        link: function(scope, element, attrs) {
            element.fancybox();
        }
    }
});

和html：

<li ng-repeat="image in media.images">
    <a href="{{image.url}}" title="{{image.path}}" rel="{{image.group}}" fancybox>{{image.name}}</a>
</li>

更新： 如果我定位fancybox类而不是元素，则箭头可以工作。

app.directive('fancybox',function(){
    return {
        link: function(scope, element, attrs) {
            $('.fancybox').fancybox();
        }
    }
});

<li ng-repeat="image in media.images">
    <a class="fancybox" href="{{image.url}}" title="{{image.path}}" rel="{{image.group}}" fancybox>{{image.name}}</a>
</li>

如果我在包含的模板之外使用我的指令，则叠加效果会起作用。