AngularJS模態服務停止工作

Question

我已經在Angular應用程序中創建了一個modal服務，可以將其注入到控制器或指令中。 我遇到一個問題，在多次打開/關閉模態后，模態中的所有內容均停止工作。 模態通過從頁面上的隱藏div抓取內容並將其彈出到模態中來工作。 我已經能夠確定在某些時候modal.settings的值發生了變化。 如果我在modal.open函數的開頭插入debugger ，並將var x = settings的值保存在控制台中，則可以看到經過幾個周期后x !== settings 。 我也嘗試過比較modal.settings ，但同樣的事情也會發生。 最終，經過幾個周期后， modal.settings發生變化，事情停止了。

我認為我需要重構此服務，但是我不確定從哪里開始，可以使用一些指導。

服務代碼如下：

app.service('modal', ['$compile', function($compile) {
    var modal = this;
    modal.settings;
    modal.contents;
    modal.overlay = $('<div id="overlay"></div>');
    modal.modal = $('<div id="modal"></div>');
    modal.content = $('<div id="content"></div>');
    modal.closeBtn = $('<div id="close"><i class="fa fa-times"></div>');

    modal.modal.hide();
    modal.overlay.hide();
    modal.modal.append(modal.content, modal.closeBtn);

    $(document).ready(function(){
        $('body').append(modal.overlay, modal.modal);
    });

    modal.open = function (settings) {
        if(!modal.settings) {
            modal.settings = settings;
        }

        modal.content.empty().append(modal.settings.content);
        if(modal.settings.class) modal.modal.addClass(modal.settings.class);
        if(modal.settings.height) modal.modal.css({ height: modal.settings.height });
        if(modal.settings.width) modal.modal.css({ width: modal.settings.width });
        if(modal.settings.content_height) modal.modal.css({ height: modal.settings.content_height });
        if(modal.settings.content_width) modal.modal.css({ width: modal.settings.content_width });
        if(modal.settings.fitToWindow) {
            modal.settings.width = $(window).width() - 160;
            modal.settings.height = $(window).height() - 160;
        };
        center(modal.settings.top);

        $(window).bind('resize.modal', center);
        modal.modal.show();
        modal.overlay.show();

        $(modal.closeBtn).add(modal.overlay).on('click', function(e) {
            e.stopPropagation();
            modal.close();
        });
        $(document).on('keyup', function(e) {
            if (e.keyCode == 27) {
                modal.close();
                $(document).unbind('keyup');
            }
        })
    };

    modal.close = function() {
        debugger;
        modal.settings.elem.empty().append(modal.settings.content);
        modal.modal.hide();
        modal.overlay.hide();
        modal.content.empty();
        $(window).unbind('resize.modal');
    };

    function center(top) {
        if(!top || !isInt(top)) top = 130;
        var mLeft = -1 * modal.modal.width() / 2;
        modal.modal.css({
            top: top + 'px',
            left: '50%',
            marginLeft: mLeft
        });
        function isInt(n) {
           return n % 1 === 0;
        }
    }
}]);

這是從控制器或指令中打開模態的方式：

modal.open({
    content: $('#edit_story_' + story.id),
    elem: $('#edit_story_' + story.id + '_container')
});

我還嘗試首先通過編譯器運行我的elem ，如下所示：

modal.open({
    content: $compile($('#edit_story_' + story.id))($scope),
    elem: $('#edit_story_' + story.id + '_container')
});

那解決了我最初的問題，但是現在經過幾個循環，我的模態內容被復制了。 我將一種形式疊放在另一種上。

Answer 1

您不應在控制器中使用DOM元素。 一個好主意是按照這種方法實施服務或進行類似的事情。 http://ionicframework.com/docs/api/service/$ionicModal/