Using ui-router with TabStrip

[James]

I am trying to implement a Kendo Tab Strip and that applies ui-router to display the contents of the tab. I can get the tab strip to display but not the contents using the ui-view. Anyone have an example of how to make these items work together.
Sample of my html.

<div class="main-template">
    <div class="row">
        <h3>Welcome to the Dashboard</h3>
        <div ng-controller="Navigation">
            <div kendo-tab-strip k-content-urls="[ null, null]">
                <!-- tab list -->
                <ul>
                    <li class="k-state-active" url="#/invoice">Invoice Management</li>
                    <li url="#/shipment">Shipment Management</li>
                </ul>
            </div>
            <div ui-view></div>
        </div>
    </div>
</div>

[James]

I needed to use ui-sref instead of url in my li's

[Petyo]

Hello James,

 

we haven't explored such scenario, but from what I know about the ui-router, most likely it can't be done without significant changes of the tabstrip widget itself. In fact, it may be simpler to use the tabstrip markup and CSS classes without the directive itself and rely on the routing mechanism to provide the interactivity part. Notice however, that such scenario is a custom one, which we can't provide further support on. 

 

Regards,
Petyo
Telerik