AngularJS {{message}} not shown inside tabestrip

3 posts, 0 answers
  1. Bertha
    Bertha avatar
    56 posts
    Member since:
    Aug 2012

    Posted 13 Nov 2015 Link to this post

    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));
    });
    });

  2. Bertha
    Bertha avatar
    56 posts
    Member since:
    Aug 2012

    Posted 16 Nov 2015 Link to this post

    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>

  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top