CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
adang
adang

Reputation: 547

uib-tabset not loading from external template

version:ui-bootstrap-tpls-2.5.0.min.js

I am facing issue in loading tabs defined in external html file. In index.html file I have referred the tab which is defined in the external template.

<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12 no-padding" template="Scripts/tpl/optionTab.tpl.html" templateUrl="Scripts/tpl/optionTab.tpl.html" ></div>

I have following example code defined in file Scripts/tpl/optionTab.tpl.html

<uib-tabset active="active">
<uib-tab index="0" heading="Static title">Static content</uib-tab>
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
  {{tab.content}}
</uib-tab>
<uib-tab index="3" select="alertMe()">
  <uib-tab-heading>
    <i class="glyphicon glyphicon-bell"></i> Alert!
  </uib-tab-heading>
  I've got an HTML heading, and a select callback. Pretty cool!
</uib-tab>

The above code works fine if i add it directly into the index.html file i.e without referring the same from external template. Can anyone please guide as what is the issue here ? There is no error in console. i have tried template, templatUrl, ng-include but nothing worked.

Upvotes: 0

Views: 812

Answers (2)

adang
adang

Reputation: 547

I am posting answer for my own question as it might help someone new to angular like me.

I can't believe that it was a very simple solution and no expert could helped to point in right direction. What all I wanted was to include the uib-tabset defined in external html file into the index.html. I tried the options of uib-tabset such as template-url(seem like it is bug as it is not picking the external file and throwing error such as multiple root elements etc). I tried ng-include but nothing seem to work. Shared plunker on request etc ultimatley I found that following is what all I needed in index.html to solve it.

 <div ng-include src="'Scripts/tpl/optionTab.tpl.html'"></div>

I was missing the single quote before the path and angular was not importing the partial html containing uib-tabset as it was trying to parse the path as variable. With single quote it treated as string and it worked. Thanks to post below which helped.

What is the correct syntax of ng-include?

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

You had a typo. Use template-url attribute instead of templateUrl.

template-url="Scripts/tpl/optionTab.tpl.html"

Plunker

Upvotes: 0

Related Questions