The timing of tab rendered (when CSS class active is added to tab pane) is not consistent.

[gfaceless]

Hi all,

In theory, if we scheduel a $timeout in tabScope.active $watcher, the function schedueled by $timeout should execute after a full $digest cycle, during that full cycle, CSS class should be added to tab pane. (because bootstrap.tabs uses ng-class, which shares the same full cycle)

but see this plunkr, the timing is inconsistent. what causes this? It is possibly a bug.

This matters because in our current work we need to calculate DOM dimensions when tab toggles,
but display:none prevent that calculating.

$timeout() 50ms fixes this, creating some helper directive forcing to add active CSS class in tabScope.active $watcher also fixes this.

[icfantv]

Just to fully understand, when you add your 50ms to the timer, are you adding it to the timer in your plunker?

This smells like a race condition to me. I don't think it will change anything because I think they are the same, but if you want to watch an attribute, you use attrs.$observe.

What happens if you use an ng-if that looks for the class? Would that be sufficient?

[gfaceless]

@icfantv yes, adding 50ms to the timer in my plunkr fixes this.

And using attrs.$observe totally fixes this! I don't know why.

[icfantv]

So they ARE NOT the same. I'm still trying to wrap my head around why, and chatted with some people smarter than me. Essentially, $scope abstracts the $watch away from the DOM whereas attrs is tied directly to the DOM. I still think it's a race condition in that the $watch is firing too soon - BTW, i was able to reproduce this consistently via the plunker on my iPad.

Some light reading:
See this for a more in-depth discussion, and this link for a better (albeit old) one.

[gfaceless]

@icfantv Sorry I rarely used $observe and misused it.
The problem still exists after using $observe.
Thanks for your references, and I'm glad that this problem could be reproduced.

[gfaceless]

@icfantv could you please reopen this issue?

[wesleycho]

Going to close this issue in favor of #4836 - the tab API is buggy, and we need to fix the source of all the issues with a fresh & 100% improved API.