CODEWITHSUNDEEP
javascriptangularjsrenderingng-switch
LeonardoGuimaraes
LeonardoGuimaraes

Reputation: 275

Is it possible to Angularjs ng-switch does not re render view?

In some page of my site, i have some directives inside ng-switch, like this:

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

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

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

Every time that I change the "view" (calendar to history) and go back (history to calendar) the angular re-render the calendar view and new queries are make in the server.

My question is about this behavior, is it possible to angular does not re-render the views? If impossible, what is the best way to solve this problem?

Upvotes: 1

Views: 1207

Answers (2)

Jarek
Jarek

Reputation: 987

Angular re-render your directives because ng-switch remove div when ng-switch-when condition is not satisfied, which makes directive is destroy and next time must be re-render.

The ng-show directive in contrast to ng-switch directive not remove element, but only hides.

So, if you want to hide and show content without re-rendering, try:

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

Upvotes: 1

Matuszew
Matuszew

Reputation: 851

If I understand correctly. You would like to not rerender view when contentMenuObj.model change - right? If so apply one way binding

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

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

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

Model in that case will be loaded only once.

Or try to use ng-show / ng-hide directives if you would like to load directives only once.

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

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

Upvotes: 4

Related Questions