AngularJS {{message}} not shown inside tabestrip

[Bertha]

Inside ContentURL of the tab i.e. "occupancy.html", it did not show {{message}} of controller.

<div id="fundingTab" data-ng-controller="fundingController">

{{message}}  <== show in here, but not inside occupancy.html (i.e. inside tab)
        <ul>
   <li class="k-state-active">Occupancy</li> <== click & travel to occupany.html but not show {{message}}
    <li>Revenue</li>
</ul>
</div>

 

$(document).ready(function () {
var ts = $("#fundingTab").kendoTabStrip({
animation: { open: { effects: "fadeIn" } },
contentUrls: [
  'clientApp/views/funding/occupancy.html',
  'clientApp/views/funding/revenue.html'
]
}).data('kendoTabStrip');
ts.tabGroup.on('click', 'li', function (e) {
ts.reload($(this));
});
});

[Bertha]

Instead of using javascript for url.  I put the partial page to html and I can get {{message}} inside tapstrip.

 <ul>
<li class="k-state-active">Occupancy</li>
<li>Revenue</li>
<li>Ancillary Revenue</li>
</ul>
<div>
<div data-ng-include="'/clientApp/views/funding/occupancy.html'"></div>
</div>
<div>
<div data-ng-include="'/clientApp/views/funding/revenue.html'"></div>
</div>
<div>
<div data-ng-include="'/clientApp/views/funding/ancillary.html'"></div>
</div>

[Petyo]

Hello Bertha,

 

the jQuery widget initialization syntax you use does not make the tabstrip aware of the angularjs context - so the expressions in the remote view won't be parsed. If you use the tabstrip directive, that approach should work as expected. 

 

Regards,
Petyo
Telerik