javascript - $scope.$apply() 创建新作用域的多个实例

Question

我正在与按 Angular 设置的 vendor 和工厂合作，我在工厂中完成所有繁重的工作，包括生成模板、创建实例和制作所有动画。提供商从左侧创建了一个非常漂亮的 slider 菜单。

问题

但实际情况是，在第一个 slider 菜单实例之后，菜单选项开始自行翻倍。所以我将拥有原始的 5，然后是 10，然后是 20，然后是 40...我找到了一个解决方案，我们从一个空实例开始，检查该实例是否为空，如果它为空则渲染菜单。所以这会强制它只连续渲染最初的 5，但是如果我们动态更改菜单，我们将永远看不到这些更改，这不是我们想要的。

fiddle

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

尝试修复列表

• 在 $animate.leave() 中设置 menu_rendered = null 将在第一个实例上起作用，并正确地重新呈现菜单，但随后背景实例无法识别点击事件

• 使用 menuOpts.scope.$destory()，但它什么也没做

• 使用menu_rendered检查的当前解决方案。它不是最佳的，并且正在寻找允许使用动态内容的解决方案。

Answer 1

更新 fiddle :https://jsfiddle.net/chdbxt1h/355/

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

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