Finding the current tab with jquery from contentUrl

5 posts, 0 answers
  1. Raymond
    Raymond avatar
    6 posts
    Member since:
    Jun 2012

    Posted 14 Oct 2014 Link to this post

    I am creating tabs dynamically for a tabstrip, using a contentUrl. Within the HTML for the 'template' file, i have a ng-repeat that calls a method in my angular controller and I want to pass the tab (as a jquery element).

    <li ng-repeat="game in tabSchedule(**need tab here**)">{{}}</li>

    I'm not a jquery expert and was wondering if there is an easy way to get the tab element. I added data properties to the tab when I created it and need access to them in the controller method.

    I assume there is a simple selector that will work on my tabstrip (id=tabs), like so:
    <li ng-repeat="game in tabSchedule($('#tabs li.k-item.k-*****')">{{}}</li>

    but I'm not sure how to ensure that the li is the one associated with the tab that is rendering.
  2. Raymond
    Raymond avatar
    6 posts
    Member since:
    Jun 2012

    Posted 15 Oct 2014 in reply to Raymond Link to this post

    I've figured out the jQuery to identify the tab that is being rendered.

    It's really an angular issue I guess, in trying to figure out how to pass the current tab (or even element) for that matter as a parameter in the ng-repeat directive. It seems that ng-repeat only deals with the angular scope object.

    This would be easy if the kendo-tab-strip directive created a child scope for each tab. Then the data for the tab could be stored in that child scope and wouldn't interfere with the scope of any other tab.
  3. Raymond
    Raymond avatar
    6 posts
    Member since:
    Jun 2012

    Posted 15 Oct 2014 Link to this post

    Getting closer...

    I created an angular directive that what I want and I output the directive (my-schedule) in the tab content:
            text:'new tab', content:'<div my-schedule></div>'

    However, the directive link code doesn't fire. If I put the directive in another html file and use contentUrl it works, but then I have another template html file used by the directive, so I want to cut down on the number of files. Any way to get the directive to fire using 'content'?
  4. Petyo
    Petyo avatar
    2437 posts

    Posted 16 Oct 2014 Link to this post

    Hello Raymond,

    you can manually  compile the directive contents using this approach.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Raymond
    Raymond avatar
    6 posts
    Member since:
    Jun 2012

    Posted 17 Oct 2014 in reply to Petyo Link to this post

    Thanks for your help, I was able to get it to work without resorting to $compile.

    When the tab is created, I add my data to it:;
    var tab = $(tabs.items()[tabNum]); = team; = []; // gets populated later

    I used contentUrl of the tab to load the following HTML:
    <div ray-schedule>
      <div ng-repeat='game in results'>{{}}</div>

    The raySchedule directive creates its own scope and references the data for the tab.

    app.directive('raySchedule', function() { return {
         scope: true,
         link: function(scope, element) {
           // find the tab enclosing the element
           var content = element.parents(".k-content");
           var id = content.attr('id');
           var selector = "ul > li[aria-controls='" + id + "']";
           var tab = content.parent().find(selector);
           // get the schedule
           scope.results =;

Back to Top