Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Unable to extend tab's template #5019

Closed
stalniy opened this issue Dec 6, 2015 · 1 comment
Closed

Unable to extend tab's template #5019

stalniy opened this issue Dec 6, 2015 · 1 comment

Comments

@stalniy
Copy link

stalniy commented Dec 6, 2015

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
Copy link
Contributor

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants