angularjs load tabstrip on demand

[Kent]

I want to load tabstrip when the tab is clicked only.  It would work if I put contentUrls in "document ready function".  But when I put url in <div class k-content-url=...> with angularjs, it will load all the tab content together.

How can I use angularjs inside tabstrip but load the tab content on demand only? Thanks.

 

No angularjs, but each tab load on demand:

$(document).ready(function () {
var ts = $("#tabstrip").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
contentUrls: [
'clientApp/views/admin/access.html',
'clientApp/views/admin/facility.html',

 

angularjs but all tab content load immediately

<div class="col-md-9 addpadding" kendo-tab-strip k-content-urls="[ null, null, null]">
<ul>
<li class="k-state-active">Basic Info</li>
<li>another tab2</li>
<li>another tab3</li>
</ul>
<div style="padding: 1em" data-ng-class="{inactivePink: staff.Inactive}">
<div data-ng-include="'/clientApp/staff/partial/basicinfo.html'"></div>
</div>
<div style="padding: 1em">
<div data-ng-include="'/clientApp/staff/partial/anothertab2.html'"></div>
</div>
</div>

[Kiril Nikolov]

Hi,

I am afraid that such functionality is not supported with the Kendo UI Tabstrip for AngularJS. It is however enabled by default in our Angular 2 offering.


Regards,
Kiril Nikolov
Telerik by Progress