Question

我正在与角度提供商和工厂一起工作，在工厂中，我负责生成模板，创建实例和执行所有动画。提供者从左侧创建一个非常漂亮的滑块菜单。

问题

发生了什么，是在滑块菜单的第一个实例之后，菜单选项开始加倍。所以我将拥有原始的5，然后是10，然后是20，然后是40 ...我找到了一个解决方案，我们从一个空实例开始，并检查该实例是否为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检查的当前解决方案。它不是最优的，并且正在寻找允许使用动态内容的解决方案。

Answer 1

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

我已将angular.element次调用移至$menuStack.open方法的正文中。菜单内容在重复曝光中不会重复。据推测，这是因为每次打开时都会重新创建DOM节点，并在leave和/或remove上干净地收集垃圾。

每次打开都会重新创建背景（菜单覆盖）和菜单，因此这应该尊重源菜单数据中的更改，但菜单打开时可能不会。

$ scope。$ apply（）创建新范围的多个实例

1 个答案: