ng-show/-hide 的替代方案或如何仅加载 DOM 的相关部分

使用 ng-show/-hide 时，这些块中包含的内容最初显示在用户屏幕上。仅在几毫秒后（在 angular.js 加载并执行后），右侧块才会显示在 ng-show 中。

有没有比 ng-show/-hide 更好的方法来仅将相关数据部分加载到 DOM 中？

ng-view 的问题是我在页面上只能有一个，所以我必须根据当前状态切换 DOM 许多部分的行为。

为了避免“未编译内容的闪现”，请使用ng-bind http://docs.angularjs.org/api/ng.directive:ngBind代替{{}} or use ng-cloak http://docs.angularjs.org/api/ng.directive:ngCloak:

<span ng-cloak ng-show="show">Hello, {{name}}!</span>

如果您使用 ng-cloak，并且没有在 HTML 的 head 部分加载 Angular.js，则需要将其添加到 CSS 文件中，并确保它加载在页面顶部：

[ng\:cloak], [ng-cloak], .ng-cloak { display: none; }

请注意，您只需在初始页面上使用这些指令。稍后引入的内容（例如，通过 ng-include、ng-view 等）将在浏览器渲染之前由 Angular 进行编译。

除了 ng-show / hide 之外，是否有更好的方法来加载数据，其中仅将相关部分加载到 DOM 中。

ng-show/ng-hide 的一些替代方案是ng-包含 http://docs.angularjs.org/api/ng.directive:ngInclude, NG开关 http://docs.angularjs.org/api/ng.directive:ngSwitch和（自 v1.1.5 起）ng-if http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngIf:

<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

也可以看看https://stackoverflow.com/a/12584774/215945 https://stackoverflow.com/a/12584774/215945有关 ng-switch 与 ng-include 一起工作的示例。

请注意，ng-switch 和 ng-if 添加/删除 DOM 元素，而 ng-show/hide 仅更改 CSS（如果这对您很重要）。