Javascript AngularJS模式服务停止工作

我在Angular应用程序中创建了一个

modal

服务，可以将其注入控制器或指令中。我遇到了一个问题，在多次打开/关闭模式后，模式中的所有东西都停止工作。模式的工作原理是从页面上的隐藏div中抓取内容并将其弹出到模式中。我已经能够确定在某个时刻，

modal.settings

的值会发生变化。如果我在我的

模式的开头插入
调试器
。打开

函数并在控制台中保存

var x=settings

的值，我可以看到在几个周期后，

x！==设置

。我还尝试比较了

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;
        }
    }
}]);

我还尝试先通过编译器运行我的

elem

，如下所示：

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

---

这解决了我最初的问题，但现在经过几个周期后，我的模态内容被复制了。我将一个表单堆叠在另一个表单上。

您不应该在控制器中使用DOM元素。一个好主意是按照这种方法实现服务，或者制作类似的东西

为什么不使用ui引导？因为引导并不是解决所有问题的方法。有时，您希望自己构建一些东西，而不是使用预先打包的解决方案。

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