Question

我在Angular应用程序中创建了一个modal服务，我可以将其注入控制器或指令。我遇到了一个问题，在多次打开/关闭模态后，模态中的所有内容都会停止工作。模态通过从页面上的隐藏div中获取内容并将其弹出到模态中来工作。我已经能够确定modal.settings的价值在某些时候会发生变化。如果我在debugger函数的开头插入modal.open并在我的控制台中保存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/

AngularJS模态服务停止工作

1 个答案: