我正在与提供者合作,并在角度上建立了工厂,在工厂中,我负责所有繁重的工作,包括生成模板,创建实例以及制作所有动画。提供者从左侧创建一个非常漂亮的滑块菜单。
问题
但是发生的是,在滑块菜单的第一个实例之后,菜单选项开始自己翻倍。因此,我将得到原始的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/