Currently, I am working on setting up a provider and factory within Angular. Most of the heavy lifting, such as generating templates, creating instances, and handling animations, takes place in the factory. The provider, on the other hand, is responsible for creating a slick slider menu that appears from the left side.
Issue
The problem I have encountered is that after the initial appearance of the slider menu instance, the menu options begin to duplicate themselves. For example, I start with 5 options, then it doubles to 10, then 20, and so on. One workaround involves initializing with a null instance and checking if it's null before rendering the menu. While this prevents the doubling issue, it also means any dynamic changes to the menu won't be reflected, which is not ideal.
Code Sample
Troublesome Code Snippet
This particular portion of the code is the main culprit behind our problem:
//Snippet causing issues
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);
});
});
}
};
Previous Attempts to Fix
Including
menu_rendered = nullwithin$animate.leave()initially resolved the doubling issue but caused problems with click events on the backdrop instance.Utilizing
menuOpts.scope.$destory()did not produce any significant changes.Current approach of checking
menu_rendered, while functional, restricts the use of dynamic content. Searching for a more optimal solution allowing dynamic updates.