To make things easier, the issue has been condensed under "The problem" for quick reference. For more details, continue reading for background information and notes before providing an answer. Thank you!
The problem
My goal is to remove the instance of a controller when the page is refreshed or when transitioning to a different view and then coming back to the original view via the navigator (nav.html). Each time the view X.html is accessed, I want the program to check if X-controller.js exists and delete it if it does, before creating a new instance.
Am I on the right track with this approach, or is it a complex issue that will require hours of coding to resolve?
Background
In my project, I utilize the $routeProvider service instead of the ng-controller directive. Upon launching the app, there are constantly two views: one at the top where users can navigate between controllers "Home - Contact - Support" (referred to as nav.html logically), and another at the bottom which displays "Home," "Contact," and so on.
This setup worked fine until the code started performing extensive calculations. The controller's instance was getting updated with unnecessary data, performing calculations on outdated data, and so forth. I researched methods for deleting the controller but found it to be more complex than anticipated.
Notes before answering the question:
- If the solution requires extensive coding, I don't expect someone to do it for me, but I would appreciate references to relevant articles or code snippets since I haven't found useful resources on my own.
- An easier solution specific to using
ng-controllerinstead of$routeProviderisn't feasible for me. With over 20 views and multiple code sections triggering view redirection with different controllers using event listeners, switching from$routeProvidertong-controlleris not currently part of the plan. - If the solution involves clearing the $scope and JavaScript variables rather than deleting the previous controller instance, that approach could work for me as well.
- I haven't included any code snippets because this question isn't related to a bug or error. If code snippets related to the
$routeProviderconfiguration or a sample view and controller are necessary, please let me know, and I'll provide them with sensitive sections replaced by dummy code.
Clarification Edit
Let me illustrate with an example. Consider X.html controlled by XCtrl.js. In the beginning, $scope.test is initialized as $scope.test = 2 in that controller. When a button in the view is clicked, $scope.test changes to 3. The view displays $scope.test at all times. So, I navigate to that view, click the button, see 3 on the screen, then switch to "Home" and return to "X," where 3 is still displayed. However, I want to see 2 displayed instead of 3. I want everything to reset in that controller.
Solution
In the end, I opted for a different approach to resolve this issue. The data stored in local storage was affecting the $scope variables (too many variables to keep track of, which I didn't realize initially). To address this, I cleared the local storage key with
localStorageService.set('keyUsed', []);I will still identify the correct solution from the answers below for the original problem I thought I had.