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

Per Mark Rajcok的答案很好，这里的a CodePen显示了ng-show，ng-switch和ng-if in action，因此您可以比较这些方法，并查看条件内容实际呈现方式的差异。

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

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

3 个答案: