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

Question

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

是否有比ng-show/-hide更好的方法来加载数据的相关部分到DOM?

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

Answer 1

为避免"flash of uncompiled content"，使用ng-bind代替{{}}或使用ng-cloak:

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

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

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

注意，你只需要在你的初始页面上使用这些指令。以后被拉进来的内容(例如，通过ng-include、ng-view等)会在浏览器渲染之前被Angular编译。

除了ng-show/hide之外，有没有更好的方法来加载数据?在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 rajcock的精彩回答，这里有一个CodePen展示了ng-show、ng-switch和ng-if的实际操作，因此您可以比较这些方法，并查看条件内容实际呈现方式的差异。

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