想像一下可能会在网页上呈现的重要内容,如图表.
角度提供2个选项来切换所述内容的可见性.
角度提供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.一旦稳定,它也会丢失$手表,所以不会受到任何进一步改变的影响.