我正在与提供者合作,并在角度上建立了工厂,在工厂中,我负责所有繁重的工作,包括生成模板,创建实例以及制作所有动画。提供者从左侧创建一个非常漂亮的滑块菜单。

问题

但是发生的是,在滑块菜单的第一个实例之后,菜单选项开始自己翻倍。因此,我将得到原始的5个,10个,20个,然后40个...我找到了一个解决方案,其中我们从一个null实例开始,并检查该实例是否为null,如果为null,则渲染菜单。因此,这迫使它仅连续渲染最初的5个,但是如果我们动态更改菜单,我们将永远看不到这些更改,这不是我们想要的。

小提琴

https://jsfiddle.net/Mr_Pikachu/chdbxt1h/351/

密码破损

这是我最关注的代码块,因为这是导致我们出现问题的位。

    backdropScope.close = function(){
        $animate.leave(menu).then(function(){
            backdrop.remove();
            //menuOpts.scope.$destroy();
            // menu_rendered = null;
            menu.remove();
        });
    }

    // menustack object
    $menuStack = {
        'open': function(menuOpts){
            menuOpts.scope.main = menuOpts.menu.main;
            if(!menu_rendered) {
                menu_rendered = menu_template(menuOpts.scope);
            }
            if(!backdropRendered) {
                backdropRendered = backdropTemplate(backdropScope);
            }
            menuOpts.scope.$apply(function(){
                $animate.enter(backdropRendered, body).then(function(){
                    $animate.enter(menu_rendered, body);
                });
            });
        }
    };


尝试的修复列表


menu_rendered = null中将$animate.leave()设置为第一个实例,然后重新正确渲染菜单,但背景实例将无法识别单击事件
使用menuOpts.scope.$destory(),但绝对没有执行任何操作
使用当前的menu_rendered解决方案进行检查。这不是最佳选择,而是在寻找一种允许使用动态内容的解决方案。

最佳答案

更新的提琴:https://jsfiddle.net/chdbxt1h/355/

我将angular.element调用移到了$menuStack.open方法的主体中。菜单内容不会在重复曝光中重复。大概是因为每次打开时都会重新创建DOM节点,并在leave和/或remove上干净地收集垃圾。

每次打开时都会重新创建背景(菜单叠加)和菜单,因此这应该支持源菜单数据中的更改,尽管打开菜单时可能不会。

关于javascript - $ scope。$ apply()创建一个新作用域的多个实例,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41573831/

10-12 12:34
查看更多