使用ng-if初始化昂贵元素，然后使用ng-show / hide显示/隐藏

Question

我有一个生成昂贵的元素。因此，我不会使用以下内容将其包含在初始页面加载中：

<div id='myExpensiveElement' ng-if='showElement'> 

如果用户点击特定按钮：

<button ng-click='showElement = !showElement'>

生成昂贵的元素并将其插入DOM中。用户可以通过再次单击该按钮来选择隐藏该元素。但是，这会导致元素从DOM中删除，需要再次生成它。

有没有办法将ng-show / hide与ng结合使用 - 如果元素已生成一次，切换到使用ng-show / hide而不是ng-if？

Answer 1

没有自定义指令的简单方法是使用另一个变量来跟踪初始化...

<button ng-click='showElement = !showElement; elementInitialized = true'></button>
<div id='myExpensiveElement' ng-if='elementInitialized' ng-show='showElement'> 
...
</div>

Fiddle