角ng-if和ng-show组合

Question

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

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

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

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

Answer 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。