替代ng-show / hide或如何仅加载DOM的相关部分
使用ng-show / hide时,这些块中包含的内容最初会显示在用户屏幕上。仅在几毫秒后(加载并执行angular.js之后),ng-
show中才会显示正确的块。
是否有比ng-show / hide更好的方法来仅将数据的相关部分加载到DOM中?
ng-view的问题在于,我在页面上只能有一个,因此我必须根据当前状态来切换DOM的许多部分的行为。
-
为了避免“未编译内容闪烁”,请使用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(如果这对您很重要)。