<tabset> error when inside an ng-switch-when

[rolanvc]

Hi, am getting a TypeError: Cannot read property '$parent' of undefined, when the is inside an ng-switch-when:

<div ng-controller="TabsDemoCtrl">
    <div ng-switch on="Key">
        <div ng-switch-when="a">
            <tabset>
                <tab heading="A">a</tab>
            </tabset>
        </div>
        <div ng-switch-when="b">
            <tabset>
                <tab heading="B">B</tab>
            </tabset>
        </div>
    </div>
</div>

Plunkr here: http://plnkr.co/edit/ZDPAUaDJv93nuRqCDHKH?p=preview

[djabor]

Seems like this is caused by the exact same thing as Issue #1216 i just opened: tabset does some trickery with the $parent causing a range of weirdness. This is just very quick theory, could be that ng-switch-when is throwing that error and not tabset.

[rolanvc]

Apparently not. Using Chrome's Developer Tools, I traced the exception to this:

.directive('tabsetTitles', ['$http', function($http) {
      return {
          restrict: 'A',
          require: '^tabset',
          templateUrl: 'template/tabs/tabset-titles.html',
          replace: true,
          link: function(scope, elm, attrs, tabsetCtrl) {
              if (!scope.$eval(attrs.tabsetTitles)) {
                  elm.remove();
              } else {
                  //now that tabs location has been decided, transclude the tab titles in
                  tabsetCtrl.$transcludeFn(tabsetCtrl.$scope.$parent, function(node) {
                      elm.append(node);
                  });
              }
          }
   };
}])

inside ui-bootstrap-tpls.js. It's the tabsetCtrl.$scope.$parent which is undefined. I really haven't studied the code yet to understand what's going on.

[buberdds]

If child scopes created by ng-switch mess with a logic of the tabsetCtrl, you can try this:

  <div ng-controller="TabsDemoCtrl">
    <tabset>
      <div ng-switch on="Key">
        <div ng-switch-when="a">
          <tab heading="A">a</tab>
        </div>
        <div ng-switch-when="b">
          <tab heading="B">B</tab>
        </div>
      </div>
    </tabset>
  </div>

[rolanvc]

@buberdds thanks for helping out! I tried your suggestion but the tabs aren't rendering correctly when there are more than one. Instead of having "tabs", its rendering it vertically like a list. But, still, thank you again!

<div ng-controller="TabsDemoCtrl">
  <tabset>
     <div ng-switch on="Key">
      <div ng-switch-when="a">
        <tab heading="A">a</tab>
        <tab heading="B">b</tab>
        <tab heading="C">c</tab>
      </div>
      <div ng-switch-when="b">
        <tab heading="X">x</tab>
        <tab heading="Y">y</tab>
        <tab heading="Z">z</tab>
      </div>
    </div>
  </tabset>
</div>

[buberdds]

Well...ng-switch now breaks down css rules ;) all .nav-tabs rules use child selectors ">", you can remove them:

'''
.nav-tabs .active a, .nav-tabs .active a:hover, .nav-tabs .active a:focus {
color: #555;
background-color: #FFF;
border: 1px solid #DDD;
border-bottom-color: rgba(0, 0, 0, 0);
cursor: default;
}

.nav-tabs li {
margin-bottom: -1px;
}
.nav-tabs li, .nav-pills li {
float: left;
}

.nav-tabs li a, .nav-pills li a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}

.nav-tabs li a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 20px;
border: 1px solid rgba(0, 0, 0, 0);
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
display: block;
}
'''

ps. it's better to use class selectors instead of element selectors.

[pkozlowski-opensource]

This got fixed in 0.8.0: http://plnkr.co/edit/TinaPrLODfOJDSELpcT1?p=preview