Angularjs ng-switch 是否可以不重新渲染视图？答案

【问题标题】：Is it possible to Angularjs ng-switch does not re render view?Angularjs ng-switch 是否可以不重新渲染视图？
【发布时间】：2016-12-21 12:12:33
【问题描述】：

在我网站的某些页面中，我在 ng-switch 中有一些指令，如下所示：

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

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

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

每次我更改“视图”（日历到历史）并返回（历史到日历）时，角度都会重新渲染日历视图，并在服务器中进行新的查询。

我的问题是关于这种行为，是否可以 Angular 不重新渲染视图？如果不可能，解决这个问题的最佳方法是什么？

【问题讨论】：

标签： javascript angularjs rendering ng-switch

【解决方案1】：

如果我理解正确的话。您不想在 contentMenuObj.model 更改时重新渲染视图 - 对吧？如果是这样，应用一种方式绑定

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

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

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

在这种情况下，模型只会被加载一次。

如果您只想加载指令一次，请尝试使用 ng-show / ng-hide 指令。

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

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

【讨论】：

【解决方案2】：

Angular 重新渲染你的指令，因为 ng-switch remove div 当ng-switch-when 条件不满足时，这使得指令被销毁，下次必须重新渲染。

ng-show 指令相对于ng-switch 指令不删除元素，而只是隐藏。

因此，如果您想隐藏和显示内容而不重新渲染，请尝试：

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

【讨论】：