Unable to extend tab's template

[stalniy]

I want to redirect user to particular page when he clicks on tab. As I have similar behavior in several places I don't want to write boilerplate code using select + active attributes. So that, I'd like to pass something like href tab-href attribute to the tab directive which is attached to link then:

<tabset>
  <tab heading="Google" href="http://google.com"></tab>
  <tab heading="Gmail" href="http://gmail.com"></tab>
</tabset>

Currently it's not possible as I need to extend template and controller but I can't get access to controller inside tab.html as there is no controllerAs.

So, the simplest fix is to add controllerAs: 'tab' to tab directive so then it can be accessed inside view. So then I do this:

angular.module('ui.bootstrap.overrides').directive('tab', function($parse) {
  return {
    restrict: 'EA',

    require: ['tab',

    compile: function(element, attrs) {
       var href = attrs.href || attrs.tabHref;

       if (href) { 
         element.find('a').attr('ng-href', '{{ tab.href() }}');
       }

       return this.link;
    },

    link: function(scope, element, attrs, tabCtrl) {
       var href = attrs.href || attrs.tabHref;

       tabCtrl.href = $parse(href).bind(scope, scope);
   }
  };
});

[wesleycho]

I don't think we want to support this exactly, although not having controllerAs and not being able to override the template on an instance by instance basis is a missing enhancement.

I should mention that it seems weird to have a redirect to an external url from tabs from a UI perspective.