AngularJS在另一个指令

Question

所以我有两个自定义指令，一个表示文件，另一个表示文件将进入的相册。我想包含html用于在html中为album指令提供了file指令，但是当我这样做时，DOM显示为file指令的空白。有线索吗？

angular
.module('app')
.directive('albumBox', function ($compile) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            reAlbum: '='
        },
        link: function (scope, element, attrs, ctrl) {

            function init() {
                var html = '<div class="album-wrapper">' +
                '<a class="buttons prev" href="#"><</a>' + 
                '<a class="buttons next" href="#">></a>' +
                '<div class="stack" ng-repeat="file in reAlbum.media">' +
                '<re-file re-file-obj="file"/></div></div>';
                element.replaceWith($compile(html)(scope));
            }
            init();
        }
    };
});

angular
.module('app')
.directive('reFile', function () {
    return {
        restrict: 'E',
        scope: {
            reFileObj: '='
        },
        replace: true,
        link: function (scope, element, attrs) {
            scope.reIndex = 0;
            var src = scope.reFileObj.url;
            var fileType = scope.reFileObj.mimetype;

            var makeURL = function (url) {
                return url;
            }

            if (fileType.indexOf('image') !== -1) {
                element.replaceWith(
                    '<img src="' + makeURL(src) + '" />'
                );
            } else {
                element.replaceWith('<video id=\'my-player\' autoplay loop class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" style="z-index:2;cursor: pointer;">' +
                    '<source src="' + makeURL(src) + '" type ="' + fileType + '"> </source>' +
                    '<p class = "vjs-no-js" >' +
                    'To view this video please enable JavaScript, and consider upgrading to a web browser that' +
                    '<a href = "http://videojs.com/html5-video-support/" target = "_blank" >' +
                    'supports HTML5 video </a> </p></video>');
            }
        }
    };
});

我使用如下指令：

<div ng-repeat="album in vm.albums">
    <album-box re-album="album"></album-box>
  </div>

为什么我的reFile指令在DOM上显示为空白？任何想法？