AngularJS 标签控制器
AngularJS controller for a tab
我的页面中有三个选项卡。我根据 Angular Bootstrap Docs.
使用 tabset
和 tab
我为 <div>
设置了一个控制器,其中 tabset
为
<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>
对应的页面是
但是,当我尝试为第二个选项卡添加另一个控制器时
<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
这是为什么?如何找回相同的功能?
这是在现有控制器中添加另一个控制器的正确方法吗?
我的app.js:
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('Tabs', function ($scope) {
});
myApp.controller('Tab2', function ($scope) {
});
我认为至少可以通过三种方式组织控制器代码:
- 一应俱全
TabController
- 每个选项卡的自定义指令
- 将您的选项卡逻辑添加到选项卡回调函数。
请查看下面或此处的演示 jsfiddle。
这是 ui-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>
这里是要在选项卡中使用的自定义指令,因此我可以为每个选项卡使用自定义控制器。
angular.module('myModule', ['ui.bootstrap'])
.directive('tabController', function() {
return {
restrict: 'A',
controller: '@',
name: 'tabController',
}
})
.controller('MyCustomController', function() {
var vm = this;
vm.title = "Hey, I am The first controller";
})
.controller('MyCustomController2', function() {
var vm = this;
vm.title = "Hey, I am the second controller!";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>
<div ng-app="myModule">
<uib-tabset type="tabs">
<uib-tab tab-controller="MyCustomController as ctrl">
<uib-tab-heading>
<span ng-bind="ctrl.title"></span>
</uib-tab-heading>
<p ng-bind="ctrl.title"></p>
</uib-tab>
<uib-tab tab-controller="MyCustomController2 as ctrl2">
<uib-tab-heading>
<span ng-bind="ctrl2.title"></span>
</uib-tab-heading>
<p ng-bind="ctrl2.title"></p>
</uib-tab>
</uib-tabset>
</div>
我的页面中有三个选项卡。我根据 Angular Bootstrap Docs.
使用tabset
和 tab
我为 <div>
设置了一个控制器,其中 tabset
为
<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>
对应的页面是
但是,当我尝试为第二个选项卡添加另一个控制器时
<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
这是为什么?如何找回相同的功能?
这是在现有控制器中添加另一个控制器的正确方法吗?
我的app.js:
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('Tabs', function ($scope) {
});
myApp.controller('Tab2', function ($scope) {
});
我认为至少可以通过三种方式组织控制器代码:
- 一应俱全
TabController
- 每个选项卡的自定义指令
- 将您的选项卡逻辑添加到选项卡回调函数。
请查看下面或此处的演示 jsfiddle。
这是 ui-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>
这里是要在选项卡中使用的自定义指令,因此我可以为每个选项卡使用自定义控制器。
angular.module('myModule', ['ui.bootstrap'])
.directive('tabController', function() {
return {
restrict: 'A',
controller: '@',
name: 'tabController',
}
})
.controller('MyCustomController', function() {
var vm = this;
vm.title = "Hey, I am The first controller";
})
.controller('MyCustomController2', function() {
var vm = this;
vm.title = "Hey, I am the second controller!";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>
<div ng-app="myModule">
<uib-tabset type="tabs">
<uib-tab tab-controller="MyCustomController as ctrl">
<uib-tab-heading>
<span ng-bind="ctrl.title"></span>
</uib-tab-heading>
<p ng-bind="ctrl.title"></p>
</uib-tab>
<uib-tab tab-controller="MyCustomController2 as ctrl2">
<uib-tab-heading>
<span ng-bind="ctrl2.title"></span>
</uib-tab-heading>
<p ng-bind="ctrl2.title"></p>
</uib-tab>
</uib-tabset>
</div>