'use strict'
var app = angular.module('myApp', ['ui.bootstrap']);
function onThreadSelect(a,b,c) {
console.log(a,b,c);
}
app.controller('mainCtrl', function ($scope, $sce) {
$scope.onThreadSelect = function (a,b,c) {
$scope.threadTemplate = '';
window.setTimeout(function() {
$scope.threadTemplate = 'tabs.html';
$scope.$apply();
});
};
});
app.controller('TabsCtrl', function ($scope, $sce) {
$scope.tabs = [
{ title: "Tab1", template: 'tab1.html', active: false },
{ title: "Tab2", template: 'tab2.html', active: false },
{ title: "FAQ", template: 'tab3.html', active: true }
];
$scope.foo = function (e) {
e.templateUrl = e.template;
};
});
app.controller('t1Controller', ['$scope',
function ($scope) {
$scope.title = 'tab 1 Controller';
}
]);
app.controller('t2Controller', ['$scope',
function ($scope) {
$scope.title = 'tab 2 Controller';
}
]);
app.controller('faqController', ['$scope',
function ($scope) {
$scope.title = 'faqController Tab';
}
]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>AngularJS Bootstrap tab directive and lazy loading demo</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.9/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="app.js"></script>
</head>
<body style="margin-left:30px" ng-controller="mainCtrl">
<select ng-model="thread" ng-change="onThreadSelect()">
<option>aaaaaaaaaaa</option>
<option>bbbbbbbbbb</option>
<option>vvvvvvvvvvv</option>
<option>cccccccccccc</option>
<option>dddddddddddd</option>
</select>
<div class="container">
<ng-include src="threadTemplate"></ng-include>
</div>
<script type="text/ng-template" id="tabs.html">
<div class="row" ng-controller="TabsCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="foo(tab)" active="tab.active" disabled="tab.disabled" >
<div class="CI_scrollable CI_tab">
<ng-include src="tab.templateUrl"></ng-include>
</div>
</tab>
</tabset>
</div>
</script>
<script type="text/ng-template" id="tab1.html">
<div class="row" ng-controller="t1Controller">
<h2>{{ title }}</h2>
<hr/>
aaaaaaaaaaaaa
</div>
</script>
<script type="text/ng-template" id="tab2.html">
<div class="row" ng-controller="t2Controller">
<h2>{{ title }}</h2>
<hr/>
aaaaaaaaaaaaaa
</div>
</script>
<script type="text/ng-template" id="tab3.html">
<div class="row" ng-controller="faqController">
<h2>{{ title }}</h2>
<hr/>
aaaaaaaaaaaaaa
</div>
</script>
<body>
</html>