Question

我有一个奇怪的问题，我很难理解。当用户想要将媒体附加到我网站上的帖子时，我会打开一个模态。模态本身太复杂，无法在小提琴上重现，但足以说明，它基本上是一个带有几个嵌套div的div，每个div代表一个带有它自己的控制器的模态中的制表符。

当我加载页面时，一切都按预期工作。点击几下（有时多达100多次，模态中的所有ng-click事件都停止工作。我仍然可以打开/关闭模态，但它内部没有任何工作。没有控制台错误或任何东西。我没有我们也能够确定问题的模式。有时候点击次数只需要十几次点击就会停止工作，有时则需要100次点击才能打破它。

某些ng-clicks嵌套在ng-repeat元素中，而其他的则不嵌套在任何内容中。奇怪的是，所有ng-clicks停止工作，无论它们是在转发器内还是不管它们属于哪个控制器。当我关闭模态时，页面上的其他ng-click仍然有效。

更新

我对我的代码进行了一些调整。我仍然有问题，但我现在能够缩小模式。它似乎是在我打开/关闭模态3次后触发的。每次打开模态时，我都会切换标签。然后我第三次打开模态，一切都冻结了。我很确定问题出在我的标签上。这是代码：

HTML：

<ul class="nav navbar-nav">
    <li ng-class="{'active-sub': view === 'photos'}">
        <a href="#" ng-click="setView('photos');">Photos</a>
    </li>
    <li ng-class="{'active-sub': view === 'videos'}">
        <a href="#" ng-click="setView('videos');">Videos</a>
    </li>
    <li ng-class="{'active-sub': view === 'surveys'}">
        <a href="#" ng-click="setView('surveys');">Mini-Posts</a>
    </li>
</ul>

然后在我的控制器中：

$scope.view = 'photos';
$scope.setView = function(view) {
    $scope.view = view;
};

如果我在该函数中插入console.log()，我可以看到视图名称每次都会更改，直到模态冻结为止，此时单击选项卡不会执行任何操作。

我进一步缩小了问题的范围。仅在关闭模式而不选择附件时才会发生冻结。这可以通过在模态外部或关闭按钮上单击来完成，这会触发模态的关闭功能。这是模态源代码：

app.service('modal', [function() {
    var modal = this;
    modal.settings = {};
    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) {
        modal.settings = settings;
        var content = modal.settings.content;

        modal.content.empty().append(content);
        if(modal.settings.class) modal.modal.addClass(modal.settings.class);
        if(modal.settings.height) modal.modal.css({ height: settings.height });
        if(modal.settings.width) modal.modal.css({ width: settings.width });
        if(modal.settings.content_height) modal.modal.css({ height: settings.content_height });
        if(modal.settings.content_width) modal.modal.css({ width: 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() {
        var elem = modal.settings.elem;
        var content = modal.settings.content;

        elem.empty().append(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;
        }
    }
}]);

模态内的所有ng-clicks在一段时间后停止工作

0 个答案: