Can AngularJS ng-switch avoid re-rendering the view?

Question

Can AngularJS ng-switch avoid re-rendering the view?

I have encountered a situation on one of my website pages where I am using directives within ng-switch, as shown below:

        <div ng-switch="contentMenuObj.model">

            <div ng-switch-when="calendar">
                // Directive specific to the calendar view
            </div>

            <div ng-switch-when="history">
                // Directive specific to the history view
            </div>
        </div>

Each time I switch between views (from calendar to history) and then return (from history to calendar), Angular re-renders the calendar view causing new queries to be made to the server.

This behavior has raised a question for me - is it possible for Angular not to re-render the views? If this is not feasible, what would be the most effective approach to resolve this issue?

javascript angularjs rendering ng-switch

Answer 1

Answer №1

It seems like you're looking to prevent the view from rerendering when contentMenuObj.model changes. If that's the case, you can apply one-way binding.

<div ng-switch="::contentMenuObj.model">

    <div ng-switch-when="calendar">
        // Display calendar directive
    </div>

    <div ng-switch-when="history">
        // Display history directive
    </div>
</div>

In this scenario, the model will only be loaded once.

Alternatively, you can use ng-show / ng-hide directives if you want to load directives just once.

<div ng-show="contentMenuObj.model == 'calendar'">
    // Display calendar directive
</div>

<div ng-show="contentMenuObj.model == 'history'">
    // Display history directive
</div>

Answer 2

It seems like you're looking to prevent the view from rerendering when contentMenuObj.model changes. If that's the case, you can apply one-way binding.

<div ng-switch="::contentMenuObj.model">

    <div ng-switch-when="calendar">
        // Display calendar directive
    </div>

    <div ng-switch-when="history">
        // Display history directive
    </div>
</div>

In this scenario, the model will only be loaded once.

Alternatively, you can use ng-show / ng-hide directives if you want to load directives just once.

<div ng-show="contentMenuObj.model == 'calendar'">
    // Display calendar directive
</div>

<div ng-show="contentMenuObj.model == 'history'">
    // Display history directive
</div>

Answer 3

Answer №2

When using Angular, your directives may be re-rendered due to ng-switch removing the div when the ng-switch-when condition is not met. This causes the directive to be destroyed and require re-rendering.

On the other hand, the ng-show directive does not remove the element, but simply hides it.

If you want to hide and show content without triggering a re-render, consider the following approach:

<div>
  <div ng-show="contentMenuObj.model === 'calendar'">
    // Content for calendar model
  </div>
  <div ng-show="contentMenuObj.model === 'history'">
    // Content for history model
  </div>
</div>

Answer 4

When using Angular, your directives may be re-rendered due to ng-switch removing the div when the ng-switch-when condition is not met. This causes the directive to be destroyed and require re-rendering.

On the other hand, the ng-show directive does not remove the element, but simply hides it.

If you want to hide and show content without triggering a re-render, consider the following approach:

<div>
  <div ng-show="contentMenuObj.model === 'calendar'">
    // Content for calendar model
  </div>
  <div ng-show="contentMenuObj.model === 'history'">
    // Content for history model
  </div>
</div>

Can AngularJS ng-switch avoid re-rendering the view?

Answer №1

Answer №2

Similar questions

Generate a new array of objects by cloning an existing array of objects with placeholder values

Executing passport.authenticate on the server side

Is there a way to make Express.js pass parameters with special characters exactly as they are?

Assistance needed in retrieving an element using jQuery

Angular: Issue with Controller Constructor Function Executing Repeatedly

When the button is clicked, bind the value to an object using the specified key in

How can I ensure that the Bootstrap datePicker is validated as a required field

Loading AngularJS controllers and views dynamically using SystemJS allows for a more efficient and streamlined

Tips for modifying the _token value in an html form data using ajax

Refreshing the entire page upon modifying a single state

Struggling to navigate to another page using Vue Router?

To navigate to a personalized HTML page from a different custom creation

Check through an array for any updates whenever a function is called and my react state is altered

The background image fails to display properly on the server in Next.js

JavaScript load event causing a race condition

Enhance your FullCalendar experience with React by displaying extra information on your calendar

Refreshing a Nested Component Within a Parent Component in React

Build a row within an HTML table that is devoid of both an ID and a class

What is the best way to save user input from an HTML text field into a jQuery variable for long-term storage?

Modify the filtered class of ng-repeat using the $index value from the controller