替代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>

有关ng-switch与ng-include一起使用的示例,另请参阅/sf/answers/880934211/.

请注意,ng-switch和ng-if添加/删除DOM元素,而ng-show/hide仅改变CSS(如果这对您很重要).