how does content load with ng-switch

Question

Our team is developing an app in ServiceNow and has created a big widget that embeds a couple other widgets. Each embedded widget is contained in its own tab and we're using ng-switch to toggle between each one. ServiceNow has a client API called recordWatch that will update content on a page without reload if an entry has been added/deleted in a corresponding back-end table. We're running into an issue where content will only update if the correct tab is pre-selected.

For instance, we have a tab for Work History. If we're already on the Work History tab and add a new entry in the back-end, content on that tab will update automatically without reload. However, if we do the same thing and another tab is open, then we would need to reload in order to see those updates.

We wanted to confirm that ng-switch only renders when the correlating tab is clicked instead of loading everything at once and only hiding until the correlating tab is clicked. If the former is correct, do we need to abandon ng-switch in order for our recordWatch to work correctly? Is there another method we can adopt to fulfill our requirements? Thanks!

Answer 1

there's one big difference between ngHide/ngShow and ngIf/ngSwitch. ngHide will actually just set the css display:none, while ngIf/ngSwitch will delete the HTML from the DOM and readd it, if the condition is met. https://stackoverflow.com/a/16742553/2157581

Therefor all widgets in an inactive ngSwitch are not running.

You can rewrite your Widget pretty easily from ngSwitch to ngHide. You should try that first.

The best practice would be to create a service, which is a singleton and can be imported to all directives/widgets. This service should take the recordWatch logic and hold the models for the directives. This way, if you ngSwitch to a new directive, it will use the newest data from the running service. https://fdietz.github.io/recipes-with-angular-js/controllers/sharing-code-between-controllers-using-services.html