Dynamic view names based on the parameters returned while calling the state

Question

I am using Kendo tabstrip with angular ng-repeat and ui-router. Now the tabstrip can have different combination and different number of tabs based on the input. I am able to give different ui-sref and ui-view names to each tab while adding tabs dynamically using angular ng-repeat.

<div class="demo-section k-content">
  <div kendo-tab-strip="detailsTabStrip" k-ng-delay="Tabs">
    <ul>
      <li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}">
       {{tab.name}}
      </li>   
    </ul>

    <div ng-repeat="tab in Tabs" ui-view="{{tab.view}}"></div>
  </div>
</div>

So, this code gives an individual ui-view to each tab. There can 150 different types of views possible in tabs. So, I cannot hard code the view names in the router file. I need the router to accept a parameter for view name or at least in some way I can let the router know which view to populate with the html.

$stateProvider
    .state('details.tab', {
        url:'/tab/:tabName',
        views:{
             // the view name should be able to either read the state param and
             // accordingly assign template or should at least be able to read the state
             // and accordingly assign the template or if views can be a function.
            "details.tabName": {
                 templateUrl: 'resources/pages/grid.html',
                 controller: 'gridController'
             }
         }
     });

Is it possible to make the views names dynamic in any way. There are other parts in the application which have absolute ui-view defined and work perfectly. The changes made to make views names dynamic for this part should not affect the other parts of application. Can I use relative views to achieve this in any way? Thanks for all the help.

Also, if I am adding tabs to kendo-tab-strip dynamically using ng-repeat, can i specify a single ui-view="details" for the tabstrip. Like for all the tab states, populate details view.

<div kendo-tab-strip="tabStrip">
    <ul>
      <li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}">
       {{tab.name}}
      </li>   
    </ul>

    <div ui-view="details"></div>
  </div>

If I do this, all the tab loads up fine first time but if I try to deep dive into tabs, for ex: if I try to deep dive into fifth tab, then the content for fifth tab loads up fine but its not shown. Even though the tab is shown as active(I am using ng-class as a function to decide which tab should be shown active by sending k-state-active to the appropriate tab while adding it).

And if I define different views for different tabs dynamically like below,

<div kendo-tab-strip="detailsTabStrip" k-ng-delay="Tabs">
    <ul>
      <li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}">
       {{tab.name}}
      </li>   
    </ul>

    <div ng-repeat="tab in Tabs" ui-view="{{tab.view}}"></div>
  </div>

then dont know, how to tell state router which view should be populated when a particular tab is clicked. Like when third tab is clicked, the corresponding ui-view specified is ui-view="third",when fourth tab is clicked, the corresponding ui-view specified is ui-view="fourth" and so on.How to configure the views dynamically in ui-router?

Thanks a lot for all the help.

Answer 1

Make a common view, use that view name on your state provider.

In that view include your desiered view as

<ng-include ng-src="'resources/pages' + tabname + '.html'" />