нг-если контент не обновляется, когда в фазе нг-выхода

Question

Если этот фрагмент запущен:

<div ng-init="o={i:1}" ng-click="o.i = o.i + 1">
    <h1>{{o.i}}</h1>
    <div class="test" ng-if="o.i < 3" style="transition: 3s all;">
        <h1>{{o.i}}</h1>
    </div>
    <button ng-click="o.i=0">reset</button>
</div>

{{o.i}} отображает увеличивающийся номер при каждом щелчке, но один раз o.i=3, внутренний h1 по-прежнему отображает {{2}}, хотя он не скрыт еще 3 секунд. Возможно ли это обновить до завершения анимации и скрытия элемента?

Answer 1

Измените ng-if на ng-show:

<div ng-init="o={i:1}" ng-click="o.i = o.i + 1">
    <h1>{{o.i}}</h1>
    <div class="test" ng-show="o.i < 3" style="transition: 3s all;">
        <h1>{{o.i}}</h1>
    </div>
    <button ng-click="o.i=0">reset</button>
</div>