Does the ng-switch-when directive create a new controller every time and erase previous data when switching to a different step?

My web application is a single page app built with angular.js and it seems like I am experiencing some performance issues. The main controller and view for this app look like the following:

<div>
 <div data-ng-switch-when="step1">
  <div data-ng-include="'/partials/step1.html'"></div>
 </div>

 <div data-ng-switch-when="step2">
  <div data-ng-include="'/partials/step2.html'"></div>
 </div>
</div>

For each step, there is a separate controller - in my case, step1-ctl and step2-ctl.

My question is: When I select step2, does angular unbind all elements from step1, remove watches, and clean up resources? Also, when switching between steps, does angular create a new controller instance each time, along with adding callbacks, bindings, etc?

javascriptperformanceangularjsng-switch

Answer №1

Not entirely clear on what you're asking about "does angular unbind all elements from step1", but AngularJS will indeed dismantle a scope generated by the ngSwitch directive (along with its children, thereby eliminating any watches established in step1) and delete the associated DOM elements. Assuming there are no poorly-coded directives that could cause resource leaks in step1.html, AngularJS should properly clean up both the DOM elements and their respective watches.

To answer your second inquiry - YES.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reveal the hidden div by sliding it up from the bottom

I have a container with brown branches resembling the image, and I'm looking to hide it. When a button is clicked, I want it to reveal from the bottom to the top, almost like it's being unmasked. I've ruled out a typical bottom-up slide anim ...

javascriptjquerycss

AngularJS: Identifying the position (ON/OFF) of ui-switch

I'm having trouble figuring out how to identify the position of my UI switch (true/false) in my JavaScript file. Here is my HTML file with the UI switch: <ui-switch ng-model='onOff'></ui-switch> And here is my controller for t ...

javascriptangularjshtmluiswitch

What purpose do the curly brackets serve when importing a module?

Consider the following code snippet: const {set} = require("lodash"); Can you explain the purpose of using {} in this code? ...

javascriptnode.jsecmascript-6

Insert information into the window before it loads

Exploring the process of opening new windows using JavaScript. var myWindow = window.open(); myWindow.document.write('html'); Is it feasible to inject content into the document before the window fully loads? I aim to include a complete HTML str ...

javascriptwindows

Utilize JavaScript to send login information to a website

I have a specific task in mind: creating a script that will automatically fill in certain data on an HTML website. To illustrate, let's imagine the site is the StackOverflow login page and I want to input my username and password. For the username fi ...

javascriptjqueryhtmlajax

Has the website become "vulnerable" following the addition of a mailto link?

Having added the mailto function to my website, I am now in search of a better alternative or an easy fix. <section class="about"> <section> <h4>Form</h4> <form method="post" action="mailto:(my email)" targ ...

javascripthtmlcssemailmailto

Divs that can be sorted are being shifted downwards within the swim lanes

JavaScript code snippet here... CSS code snippet here... HTML code snippet here... ...

javascripthtmlcss

What is the process for converting an Angular UTC timestamp to a local timestamp?

Is it possible to convert a UTC timestamp to a local time timestamp using any function or method? I am sending the timestamp to angular moments, but the server's timestamp is in UTC. ...

javascriptangularjsionic-frameworktimestamputc

The Angular Sortable Containment feature ensures that items cannot be dropped outside of

I am experiencing an issue with a horizontal sortable Angular list where the containment option is not functioning properly, causing the dragged item to not be dropped. Take a look at the sortable list below without a containment option - you may notice t ...

javascriptjqueryangularjsjquery-uisorting

What is the proper error type to use in the useRouteError() function in react-router-dom?

In my React project, I am utilizing the useRouteError() hook provided by react-router-dom to handle any errors that may arise during routing. However, I'm uncertain about the correct type for the error object returned by this hook. Currently, I have ...

javascriptreactjstypescriptreact-routerreact-router-dom

Issues with the Speed of Qt Creator

Despite the hype surrounding Qt and my eagerness to use it, I encountered major performance issues when trying to build a simple Hello World app using Qt Creator. The sluggishness of Qt Creator made it nearly impossible to work with. The biggest issue ...

c++performanceqtuser-interface

Sentry platform is failing to record network-related problems

Incorporating Sentry into my Next.JS application has allowed me to easily detect JavaScript errors such as reference or syntax issues on the Sentry platform. Unfortunately, I have encountered some challenges as Sentry is not logging any network-related er ...

javascriptnext.jssentry

Guide on extracting data from an HTML table column and saving it to a JavaScript array with the help of JQuery

Suppose there is a table column containing 10 rows, each with <td id="num"> and some text value. Is there a way to utilize JQuery in order to iterate through every row within the column and store the values in a JavaScript array? I attempted the co ...

javascriptjqueryajax

How to access a TypeScript global variable from outside an Angular controller?

In my main.ts file, there is a global variable named rowTag which is an array of Tag[] entities. Additionally, I have an angular controller named TagMeController.ts. Below is the constructor of TagMeController: constructor($scope, $rootScope) { ...

angularjstypescript

Getting articles based on identification

I have received a JSON object from my WordPress site, here is what it looks like: { "ID": 4164, "title": "24-Hour Non-Stop with Marco Carola", "status": "publish", "type": "post", "author": { "ID": 11, ...

javascriptjsonangularjswordpresshttp

Is there a way to update the playlist using JavaScript without having to refresh the website every time it reloads?

Howlerjs is being used to generate a playlist on my website, similar to the example provided here: Below is the JavaScript code for the aforementioned example: var radio = new Radio([ { freq: '81.4', title: "BBC Radio 1", src: &ap ...

javascriptjqueryhowler.js

PyQT4 error message: "Error: Trying to modify a non-modifiable attribute of an unmodifiable property."

Encountering issues observing event properties of HTML elements in a QWebpage using PyQt. The webpage intended for loading and execution with PyQt: <html> <head> <title>Test</title> <script> /* * object.watch polyfill * * ...

javascripthtmlpython-3.xpyqt4

Absence of a connectivity pop-up within Ionic 2

Whenever the app loads, my "network check" should run automatically instead of waiting for the user to click on the Check Connection button. I tried putting it in a function but couldn't get it to work. Can anyone help me identify the syntax error in ...

javascripttypescriptionic2

Error: The current object referenced is not a constructor and has been invoked previously

I am facing an issue with my code involving an interpreter: //Interpreter.js class Interpreter { constructor() { this.data = "data"; } ... } module.exports = Interpreter; //index.js const Interpreter = require('./interpreter/I ...

javascriptclassconstructor

Steps for including a new script in package.json

Is there a way to add the script dev to my package.json from the terminal? I attempted to manually add it using a text editor, but when I try to run: npm run dev I encounter some errors. Is there a way to include this script through the command line? E ...

javascriptnode.jsjsonnpmnpm-scripts