angularjs – 替代ng-show/-hide或者如何只加载DOM的相关部分

发布时间：2020-12-17 09:00:42 所属栏目：安全来源：网络整理

导读：当使用ng-show / -hide时，包含在这些块中的内容最初显示在用户屏幕上。只有几毫秒(在angular.js加载并执行之后)，正确的块才会显示在ng-show中。有没有更好的方法比ng-show / -hide只加载相关的数据部分到DOM？ ng-view的问题是我只能在页面上有一个，所以

当使用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(如果对您重要的话)。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!