小编典典

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

angularjs

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

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

ng-view的问题在于,我在页面上只能有一个,因此我必须根据当前状态来切换DOM的许多部分的行为。


阅读 338

收藏
2020-07-04

共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(如果这对您很重要)。

2020-07-04