一尘不染

角ng-if和ng-show组合

angularjs

想象一下可能会在网页上呈现的大量内容,例如图表。Angular提供2个选项来切换内容的可见性。

ng-show
将呈现内容,而不管其表达方式是什么,然后在事实之后简单地“隐藏”它。这是不理想的,因为用户在会话期间可能永远不会“打开”内容,因此渲染内容很浪费。

ng-if 在这方面更好。如果表达式为假,则用它代替ng-
show可以防止首先显示大量内容。但是,它的优点也是缺点,因为如果用户隐藏该图表然后再次显示它,则每次都会从头开始呈现内容。

我该如何制定一个兼顾两全其美的指令?这意味着它会像ng-if一样工作,直到第一次渲染内容为止,然后切换为像ng-show一样工作,以防止每次都重新渲染它。


阅读 237

收藏
2020-07-04

共1个答案

一尘不染

丹尼斯(Denis)的答案+1,但仅出于完整性考虑,它甚至可以通过将逻辑保留在视图中而不会“污染”控制器来进一步简化:

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

矮人

编辑: 以上版本可以通过一次绑定进一步改进(和简化),以减少不必要的$ oncewatch-这仅适用于Angular 1.3+:

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

undefined需要,以确保观看值不“稳定”成为前true。一旦价格稳定下来,它也将失去$ watch,因此不会受到进一步更改的影响show

2020-07-04