Angular嵌套指令不起作用

Question

HTML

<div class="hamburger">
    <a hz-photo-options-popup href="#popup-options-{{$index}}" class="popup-with-form clsPhotoOptionsPopup">
        <i class="fa fa-bars"></i>
    </a>
</div>
<form id="popup-options-{{$index}}" class="album_main_popup mfp-hide">
    <div class="tabs-container" id="tab-container"  hz-photo-options-tab-clicker>
        <ul class="tabs-frame tabs tabs_top page_tab_menu"  data-parent="tabs-container">
            <li class="static static-one"><a href="#edit-description">Edit description</a></li>
            <li class="static static-one"><a href="#move-to-album">Move to album</a></li>
            <li class="static static-one"><a href="#photo-editor">Photo editor</a></li>
            <li class="static static-one"><a href="#edit-tags">Edit tags</a></li>
            <li class="static static-one"><a href="#delete-photo">Delete</a></li>
        </ul>
        <div class="tabs-frame-content tab_content innerpagetab" id="edit-description">
            Edit description
        </div>
        <div class="tabs-frame-content tab_content innerpagetab" id="move-to-album">
            Move to album
        </div>
        <div class="tabs-frame-content tab_content innerpagetab" id="photo-editor">
            Photo editor
        </div>
        <div class="tabs-frame-content tab_content innerpagetab" id="edit-tags">
            Edit tags
        </div>
        <div class="tabs-frame-content tab_content innerpagetab" id="delete-photo">
            Delete
        </div>
    </div>
</form>

指令

.directive("hzPhotoOptionsTabClicker", [function () {
/*
 * Open magnific popup
 */
return {
    restrict: "AE",
    replace: true,                        
    scope: {},
    compile: function (element, attrs) {
        return {
            pre: function (scope, element, attrs) {
                angular.element(".tabs li:not(.static-one, .ui-state-active)").hide();
                //comment above one line and put bellow two functions for prevent keyboard navigation.
                $("#" + element[0].id).tabs({
                    activate: function (event, ui) {
                        ui.newTab.blur();
                    },
                });
                $("#" + element[0].id + ' a').click(function () {
                    $(this).blur();
                });
                angular.element(".static, .static-one, .ui-state-active").show();
            }
        };
    },
    link: function (scope, element, attrs) {}
}
}])
.directive("hzMovePhotoToAlbumPopup", [function () {
/*
 * open tab menu
 */
return {
    restrict: "A",
    replace: true,
    compile: function (element, attrs) {
        return {
            pre: function (scope, element, attrs) {
                angular.element('.clsMoveAlbum').magnificPopup({
                    type: 'inline',
                    preloader: false,
                    focus: '#name',
                    // When elemened is focused, some mobile browsers in some cases zoom in
                    // It looks not nice, so we disable it:
                    callbacks: {
                        beforeOpen: function () {
                            if (angular.element(window).width() < 700) {
                                this.st.focus = false;
                            } else {
                                this.st.focus = '#name';
                            }
                        },
                        beforeClose: function () {

                        }
                    }
                });
            },
            post: function (scope, element, attrs) {}
        };
    },
    link: function (scope, element, attrs) {}
}
}]);

我遇到嵌套指令调用的问题。在我的HTML中，我需要调用2嵌套指令。第一个指令“hzMovePhotoToAlbumPopup”是一个巨大的弹出窗口，我通过调用“hzPhotoOptionsTabClicker”来显示ui的选项卡菜单。 弹出窗口正确调用，并显示弹出窗口的内容，我放置选项卡菜单。但是标签菜单html正在显示但是 它不起作用。它不允许更改标签。

请给我解决方案，我应该在哪里犯错。