kendo-tab-strip-if possible implementations

[leblancmeneses]

I have a lot of controls on these tabs and it's causing a performance problem.

One possible fix is to use ng-if/ng-swith based on the selected tab to destroy $scopes/dom controls not in use.

Two implementations exist each with their own set of problems to deal with:

1. Use a $scope property around to track the name of the tab

1.1

  <div kendo-tab-strip ext-tab-strip-if='["TabNotes","tabName2"]'>

1.2

    <div ng-switch="TabStripMetadata.TabSelectedByName">
        <div ng-switch-when="TabNotes">
            @Html.Partial("TabNotes")
        </div>
        <div ng-switch-default>
            {{TabStripMetadata.TabSelectedByName}}
        </div>
    </div>

IT WOULD REALLY HELP TO GIVE A VISUAL STRUCTURE OF SCOPES/ISOLATED SCOPES CREATED BY THE CONTROLS

with the prototypical inheritance I haven't found a reliable way to do this. Without docs of scopes (batarang, ng-inspector - are not reliable and shouldn't be required on commercial controls that should be documented) it will take a ramp of time that shouldn't be necessary.

Example: http://www.telerik.com/help/silverlight/gridview-visual-structure.html

2. Another approach is to use a directive that mimics ng-if based required kendoTabStrip/kendoTabstrip - both are registered in the angular.module....

I think this is the cleanest approach since I'm not dealing with prototypical inheritance problems. However, require isn't working for kendo controls probably because the directive controller is defined but empty. That means I have to do hacky stuff to get back to the tabstrip instance when it should have been as easy as requiring ^kendoTabStrip and kendoTabStrip.get()

see for yourself: http://dojo.telerik.com/IruwI

<div ng-controller="MyCtrl">
    <div kendo-tab-strip k-content-urls="[ null, null]">
      <!-- tab list -->
      <ul>
        <li class="k-state-active">First tab</li>
        <li>Second tab</li>
      </ul>

      <div style="padding: 1em">
        <kendo-tab-strip-if>
          I am removed from dom + scope destroyed
        </kendo-tab-strip-if>
      </div>

      <div style="padding: 1em">
        This is the second tab
      </div>
    </div>
</div>

I am just a little frustrated for the hoops I have to jump and airing out a few of the problems I am seeing when building a simple directive extension.

[leblancmeneses]

I have version 2 working. Created a separate extension that enables me to use require: '^extKendoBridge',

    .directive('extKendoBridge', [function () {
        return {
            restrict: 'A',
            controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
                this.Instance = function () {
                    return $element.data($attrs.extKendoBridge);
                };
            }],
            link: function ($scope, element, attr) {
            }
        };
    }])

[kathannshea]

@leblancmeneses

Can you help me understand your full implemented solution. I have the same problem with too many items on the tabs.