从Fancybox2

Question

我有这个指令

app.directive('fancybox', function($compile, $timeout){
        return {
            link: function($scope, element, attrs){
                $(element).fancybox({
                    'transitionIn': 'elastic',
                    'transitionOut': 'elastic',
                    'width': '250',
                    'height': '250',
                    'speedIn': 600,
                    'speedOut': 200,
                    'overlayShow': false,
                    afterLoad: function () {
                        $timeout(function(){
                            $compile($("#content-popup"))($scope);
                            $scope.$apply();
                            $.fancybox.resize();
                        })
                        this.title = $(this.element).next('.content-popup-footer').html();
                    },
                    helpers: {
                        title: {
                            type: 'inside'
                        }
                    },

                });
            }
        }
    });

我试图调用调用fancybox的控制器内部的函数。这是我发送到fancybox的html

<a href="{{content.source}}" fancybox="fancybox" id="content-popup"
   class="transparent-box content-popup content-picture-container"
   rel="campaign-picture-popup" "><a/>

<!--Fancybox footer data begin-->
<div class="content-popup-footer" style="display:none">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <div class="content-popup-user-info">
                <img class="content_picture_profile_pic"
                     ng-src="{{content.photographer.instagramProfilePicture}}"/>

                <div class="content_popup_user_name">
                    {{content.photographer.instagramUserName}}
                </div>
                <i class="fa fa-circle small-dot"></i>
                <span id="instagram-picture-time-taken">{{content.timeTaken}}</span>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 content_popup_link_container">
            <div class="content_popup_link">
                <i class="fa fa-link"></i>
                <a href="{{content.link}}" target="_blank">View source</a>
            </div>
        </div>
    </div>
    <div class="row" id="content-popup-picture-info-row">
        <div class="col-md-12">
            <p>{{content.description}}</p>
        </div>
        <div class="col-md-12" id="content-popup-statistics">
            <span><i class="fa fa-thumbs-o-up"></i>{{content.likesCount}}</span>
            <span><i class="fa fa-comment-o"></i>{{content.commentsCount}}</span>
        </div>
    </div>

    <form role="form">
        <div class="form-body">
            <div class="form-group">
                <div class="input-icon">
                    <i class="fa fa-pencil-square-o"></i>
                    <input id="name" type="text" class="form-control"
                           placeholder="Add caption">
                </div>
            </div>
        </div>
    </form>
    <div>
        <button class="btn select-content-btn"
                ng-click="onSelectedContent(content)"
                ng-style="content.selected  && {'background-color':'#2ecc71'}  || !content.selected   && {'background-color':'#95a5a6'}">
            <i class="fa fa-check" ng-if="content.selected"></i>
            <span ng-if="!content.selected">Select</span>
            <span ng-if="content.selected">Selected</span>
        </button>
    </div>
</div>
</div>
<!--Fancybox footer data end-->

范围未在fancybox窗口内被识别的问题，我无法调用onSelectedContent（）。

如何将范围添加到fancybox窗口，以便我可以激活所有范围的功能和道具？