替代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的头部加载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>

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