0
angular-bootstrap version used : 1.2.0
angular-version : 1.5.7

I am trying to override header html of uib-tab like below,

<li ng-class="{active: active, disabled: disabled}" class="uib-tab">
    <a ui-sref="MyController.overviewStateUrl" ng-click="select()" uib-tab-heading-transclude>{{heading}}</a>
</li>

When the page is rendered, the value for ui-sref is taken as MyController.overviewStateUrl instead of the real value which is stored in overviewStateUrl attribute of MyController. Is there any way to do it?

I tried to put it inside interpolation, but it returns empty string. Here's the plunker.

JPS
  • 2,730
  • 5
  • 32
  • 54
  • `ui-sref` expects a string and doesn't evaluate an expression. If you want to pass an expression, then you should rightly interpolate them. If the interpolation returns an empty string, then check your controller – Ladmerc Apr 11 '17 at 11:40
  • @Ladmerc, Since the directive uses isolated scope, `MyController` is not accessible inside that html. for example `{{MyController.myHeader}}` does not show `myHeader` value. I mean, it's not a problem of `ui-sref`, but i am not able to access the controller at all inside that html – JPS Apr 11 '17 at 11:57

1 Answers1

0

Have you tried as like below code?

<a ui-sref="{{MyController.overviewStateUrl}}" ng-click="select()" uib-tab-heading-transclude>{{heading}}</a>
Immanuel Kirubaharan
  • 1,094
  • 1
  • 11
  • 17