Finding the current tab with jquery from contentUrl

[Ray]

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**)">{{game.date}}</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-*****')">{{game.date}}</li>

but I'm not sure how to ensure that the li is the one associated with the tab that is rendering.

[Ray]

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.

[Ray]

Getting closer...

I created an angular directive that what I want and I output the directive (my-schedule) in the tab content:

tabs.append({
        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'?

[Petyo]

Hello Raymond,

you can manually  compile the directive contents using this approach.

Regards,
Petyo
Telerik

 

 

[Ray]

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:

tabs.select(tabNum);
var tab = $(tabs.items()[tabNum]);
tab.data().team = team;
tab.data().schedule = []; // gets populated later

I used contentUrl of the tab to load the following HTML:

<div ray-schedule>
  <div ng-repeat='game in results'>{{game.date}}</div>
</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 = tab.data().schedule;
     }
   };
});

​