anglejs – 角度ng-if和ng-show组合

发布时间：2020-12-17 07:41:38 所属栏目：安全来源：网络整理

导读：想像一下可能会在网页上呈现的重要内容,如图表. 角度提供2个选项来切换所述内容的可见性. ng-show将呈现内容,不管表情如何,简单的“隐藏”事实之后.这不是理想的,因为用户在会话期间可能永远不会“打开”内容,所以渲染它是一种浪费. ng-if在这方面更好.如果

想像一下可能会在网页上呈现的重要内容,如图表.
角度提供2个选项来切换所述内容的可见性.

ng-show将呈现内容,不管表情如何,简单的“隐藏”事实之后.这不是理想的,因为用户在会话期间可能永远不会“打开”内容,所以渲染它是一种浪费.

ng-if在这方面更好.如果表达式为false,则使用它替代ng-show将防止重要内容被渲染在第一位.然而,它的实力也是它的弱点,因为如果用户隐藏了图表,然后再次显示出来,内容每次都是从头开始的.

我如何制定一个充分利用这两个世界的指令？意思是在第一次渲染内容之前像ng-if一样工作,然后切换到像ng-show这样的工作,以防止每次重新渲染.

1对于丹尼斯的回答,只是为了完整性,甚至可以通过保持视图中的逻辑进一步简化,而不会“污染”控制器：

<button ng-click="show = !show">toggle</button>
<div ng-if="once = once || show" ng-show="show">Heavy content</div>

plunker

编辑：上述版本可以进一步改进(和简化)一次绑定,以减少不必要的$手表一次 – 这将只适用于角度1.3：

<div ng-if="::show || undefined" ng-show="show">Heavy content</div>

需要确定未定义的值才能成为true.一旦稳定,它也会丢失$手表,所以不会受到任何进一步改变的影响.

（编辑：李大同）

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