search

rpocklin / ui-router-tabs

Idiot-proof tab panes with route support using Angular.js + Bootstrap 3 + UI Router
Other
244 stars 57 forks source link

The location of ui-view should be inside of uib-tab #53

Closed yukw777 closed 8 years ago

yukw777 commented 8 years ago

Since ui-router-tabs expects ui-view to be defined outside of uib-tab, it behaves weirdly when you css expects your tab contents to be inside of uib-tab. I think the more natural default template is: 

<div>
  <uib-tabset class="tab-container" type="{{type}}" vertical="{{vertical}}" justified="{{justified}}">
    <uib-tab class="tab" ng-repeat="tab in tabs" heading="{{tab.heading}}" active="tab.active" disable="tab.disable" ng-click="go(tab)">
      <ui-view></ui-view>
    </uib-tab>
  </uib-tabset>
</div>

This way you don't need to specify ui-view explicitly, and everything is in its expected location.

Maybe this was intentional to give more flexibility? I'm currently using the template above for my application. Either way, let me know!

rpocklin commented 8 years ago

Yes you're right, it was done for more flexibility, in the example it is contained within a column width specification - hard to know where people want to place the tabs / target content.

This way is simpler though, happy to consider adding another HTML template like this into the repo.

yukw777 commented 8 years ago

Maybe it's sufficient to mention this in README.

Btw, the template needs to be fixed this way:

<div>
  <uib-tabset class="tab-container" type="{{type}}" vertical="{{vertical}}" justified="{{justified}}">
    <uib-tab class="tab" ng-repeat="tab in tabs" heading="{{tab.heading}}" active="tab.active" disable="tab.disable" ng-click="go(tab)">
      <div ng-if="$first">
        <ui-view></ui-view>
      </div>
    </uib-tab>
  </uib-tabset>
</div>

Otherwise, it'll call the child state as many time as there are tabs because of ng-repeat.

yukw777 commented 8 years ago

Disregard, the template above does not work. I ended up fixing the problem via CSS.