Angular-ui: tab contents from separate html file

Question

I have this simple tab panel:

<div ng-controller="TabsDemoCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
  {{tab.content}}
</tab>
</tabset>
</div>

and this simple controller:

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function   ($scope) {
$scope.tabs = [
{ title:'Dynamic Title 1', content:'/tab1.html' },
{ title:'Dynamic Title 2', content:'Dynamic content 2'}
];
});

my problem is that I would like for tab 1 to get its contents from an .html file, not from the static array. Is there a way to achieve this? If it can be of some use here's my plunker: http://plnkr.co/edit/mFkI7oDIeamqd444wlqr

Łukasz · Accepted Answer · 2015-06-26 14:32:52Z

6

ng-include is your friend

<div ng-include="tab.content"></div>

http://plnkr.co/edit/bAqoP9oY5apKAvvPQxOe?p=preview

answered Jun 26, 2015 at 14:32

Łukasz

6435 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sangeetha Narayana Moorthy · Accepted Answer · 2018-05-24 14:31:49Z

0

I have put ng-include="'managetab.html'" first , it shows

WARNING: Tried to Load Angular More Than Once

Then i put

<div ng-include="'app/views/managetab.html'"></div>

works fine ....

answered May 24, 2018 at 14:31

Sangeetha Narayana Moorthy

2061 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular-ui: tab contents from separate html file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related