AngularJS：如何阻止额外代码被执行

这个问题我之前也碰到过！核心原因是**ng-show和ng-if的本质区别**：ng-show只是通过CSS隐藏DOM元素，但元素本身在页面加载时就已经被服务器端渲染出来了；而ng-if会在条件不满足时完全移除对应的DOM节点，只有当条件为真时才会触发渲染。

回到你的场景：服务器端渲染页面时，根本不会管Angular的ng-show条件，会直接执行@Html.Partial("ImageSelector")，导致ImageSelector的控制器提前运行，可此时currentItDraftHeader还没初始化，自然就抛出错误了。

所以只需要把ng-show换成ng-if，再加上currentItDraftHeader的存在判断（避免空指针），就能解决问题：

<uib-tab ng-if="currentItDraftHeader && currentItDraftHeader.treeType===2">
  <uib-tab-heading>
    <i class="fa fa-picture-o" uib-tooltip="@Labels.images" tooltip-placement="bottom"></i>
  </uib-tab-heading>
  @Html.Partial("ImageSelector")
</uib-tab>

这样一来，只有当currentItDraftHeader存在且treeType等于2时，ImageSelector的Partial才会被渲染，它的控制器代码也只会在这个时机执行，完美避开初始化阶段的错误。

内容的提问来源于stack exchange，提问作者Naomi