0

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.

adang
  • 547
  • 4
  • 14

2 Answers2

0

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

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

Plunker

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • Sorry but that did not worked. I already tried that template-url for uib-tab. In addition to that I tried loading external template using templateUrl on a div. There is no error being thrown in console. However if I modify the optionTab.tpl.html and add some invalid data in it (such as text 'rr' before – adang Nov 10 '17 at 17:45
  • Can you please reproduce your problem in plunker please? – Pankaj Parkar Nov 10 '17 at 17:46
  • please try the plunker link now. TO me it is giving same response as I mentioned. I am sure I am missing something but it is coming consistently. – adang Nov 10 '17 at 17:58
  • please find it here https://plnkr.co/edit/jUiMkIUnM5ue6A9MIlbE?p=preview – adang Nov 10 '17 at 18:10
  • I updated the plunker yesterday. if you have got chance to look it then can you comment if the code in template file is defined incorrectly ? I have taken the sample code only. Is it not able to find the controller if uib-tab defined in external file ? – adang Nov 12 '17 at 13:56
0

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?

adang
  • 547
  • 4
  • 14