Инициализировать дорогой элемент с помощью ng-if, затем показать / скрыть с помощью ng-show/hide

Question

У меня есть элемент, чье поколение дорого. Таким образом, я не включаю его при начальной загрузке страницы, используя:

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

Если пользователь нажимает определенную кнопку:

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

дорогой элемент генерируется и вставляется в DOM. Пользователь может выбрать, чтобы скрыть этот элемент, нажав кнопку еще раз. Однако это приводит к тому, что элемент удаляется из DOM, что требует его повторной генерации.

Есть ли способ объединить ng-show/hide с ng-if так, чтобы, если элемент был сгенерирован один раз, переключиться на использование 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>

скрипка