Tag Archives: ui-bootstrap

ui-bootstrap Oddity

The <tab> element from the Angular-UI project’s ui-bootstrap has an oddity with the activate attribute, it seems, when calling a function to determine whether a tab should be active. For example,

[javascript light=”true”]

<tab ng-repeat="u in foo.units" active="activeTab(u)">

[/javascript]

causes JavaScript errors and the tabs do not function correctly. Poking around in the internals of ui-bootstrap-tpls.js lead to me discover that in this case the code

[javascript light=”true”]
if (attrs.active) {
getActive = $parse(attrs.active);
setActive = getActive.assign;
[/javascript]

leaves setActive to undefined. The JavaScript later attempts to call setActive, which crashes and burns of course.

I was able to work around the problem by copying the essentials of the activeTab function into the active attribute, e.g.

[javascript light=”true”]

<tab ng-repeat="u in foo.units" active="bar.isPlugh == u.state.isPlugh">

[/javascript]