微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

angularjs – 替代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的head部分中加载Angular.js,则需要将其添加到CSS文件中,并确保它在页面顶部加载:

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

请注意,您只需在首页上使用这些指令。稍后提取内容(例如,通过ng-include,ng-view等)将在浏览器呈现之前由Angular编译。

Is there a better way to load data other than ng-show / hide,in which only the relevant section is loaded into the DOM.

ng-show / ng-hide的一些替代方法ng-include,ng-switch和(自v1.1.5起)ng-if

<div ng-include src="someModelPropertySetToThePartialYouWantToLoadRightNow"></div>

有关ng-switch与ng-include配合使用的示例,另请参见http://stackoverflow.com/a/12584774/215945

注意,ng-switch和ng-if添加/删除DOM元素,而ng-show / hide仅更改CSS(如果对您重要的话)。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐