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

Question

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

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

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

Answer 1

为避免“未编译内容的闪烁”，请使用ng-bind代替{{}}或使用ng-cloak：

<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-include、ng-switch和（自 v1.1.5 起）ng-if：

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

另请参阅https://stackoverflow.com/a/12584774/215945以获取 ng-switch 与 ng-include 一起工作的示例。

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

Answer 2

我使用了 ng-cloak 技巧，但似乎效果不佳。在 Angular 文档之后，我将以下内容添加到我的 CSS 中并且确实有效：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

请参阅：http ://docs.angularjs.org/api/ng.directive:ngCloak

Answer 3

根据 Mark Rajcok 的最佳答案，这是一个 CodePen，显示了 ng-show、ng-switch 和 ng-if 的作用，因此您可以比较这些方法，并查看条件内容实际呈现方式的差异。

请注意，对于基于文件的模板，有些人觉得 ng-show 比 ng-switch 和 ng-if 快一点。但是您可以使用$templateCache在引导时预加载模板，从而减少或消除这种优势。使用 ng-switch 和 ng-if，您不再需要在不需要时处理隐藏在 DOM 中的条件内容，并防止 Angular 在不合时宜的时候评估该内容上的表达式。这可以节省您不需要浪费的处理资源，并避免在过早评估某些内容时可能引发的错误。