我的页面中有三个选项卡。我在用着tabset and tab根据Angular 引导文档 https://angular-ui.github.io/bootstrap/#/tabs.
我设置了一个控制器<div>其中有tabsetas
<div ng-controller="Tabs" class="panel panel-default" id="tabs-panel">
<tabset class="panel-body">
<tab heading="Tab 1"> </tab>
<tab heading="Tab 2"> </tab>
<tab heading="Tab 3"> </tab>
</tabset>
</div>
The corresponding page is 
但是，当我尝试为第二个选项卡添加另一个控制器时
<div ng-controller="Tabs" class="panel panel-default" id="tabs-panel">
<tabset class="panel-body">
<tab heading="Tab 1"> </tab>
<tab heading="Tab 2" ng-controller="Tab2> </tab>
<tab heading="Tab 3"> </tab>
</tabset>
</div>
我现在发现标题没有显示，并且无法再单击 Tab2。
这是为什么？如何恢复相同的功能？
这是在现有控制器中添加另一个控制器的正确方法吗？
My app.js :
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('Tabs', function ($scope) {
});
myApp.controller('Tab2', function ($scope) {
});
我认为至少可以通过三种方式组织控制器代码：
TabController
请查看下面的演示或此处jsfiddle http://jsfiddle.net/awolf2904/8u55wea9/.
这是ui-bootstrap https://angular-ui.github.io/bootstrap/添加了上述要点的示例代码。
angular.module('demoApp', ['ui.bootstrap'])
.controller('TabsDemoCtrl', TabsController)
.directive('sepecialTab', SpecialTab);
function TabsController($scope, $window) {
$scope.tabs = [{
title: 'Dynamic Title 1',
content: 'Dynamic content 1'
}, {
title: 'Dynamic Title 2',
content: 'Dynamic content 2',
disabled: true
}];
$scope.alertMe = function () {
setTimeout(function () {
$window.alert('You\'ve selected the alert tab!');
});
};
$scope.thirdTabCallback = function () {
$scope.test = 'I\'m the third tab callback';
$scope.clickme = function () {
$window.alert('third tab only function');
};
};
}
function SpecialTab() {
return {
restrict: 'A',
controller: function ($scope) {
console.log('Special tab ctrl, runs on start.');
$scope.hello = 'hello from special tab controller';
}
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="TabsDemoCtrl">
<p>Select a tab by setting active binding to true:</p>
<p>
<button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
<button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
</p>
<p>
<button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
</p>
<hr />
<tabset>
<tab heading="Static title">Static content</tab>
<tab heading="Static title 2" sepecial-tab="">Static content2 {{hello}}</tab>
<tab heading="Static title 3" select="thirdTabCallback()">Static content3 {{test}}
<button ng-click="clickme()">click me</button>
</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">{{tab.content}}</tab>
<tab select="alertMe()">
<tab-heading> <i class="glyphicon glyphicon-bell"></i> Alert!</tab-heading>I've got an HTML heading, and a select callback. Pretty cool!</tab>
</tabset>
</div>