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/