J'ai trois onglets dans ma page. J'utilise tabset
et tab
en fonction de Angular Docs Bootstrap .
J'ai défini un contrôleur pour le <div>
qui a le tabset
as
<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>
Mais, lorsque j'essaie d'ajouter un autre contrôleur pour mon deuxième onglet,
<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>
Je constate maintenant que l'en-tête n'est pas affiché et je ne peux plus cliquer sur l'onglet2.
Pourquoi donc? Comment récupérer la même fonctionnalité?
Est-ce la bonne façon d'ajouter un autre contrôleur dans un contrôleur existant?
Mon app.js:
var myApp = angular.module('myApp',['ui.bootstrap']);
myApp.controller('Tabs', function ($scope) {
});
myApp.controller('Tab2', function ($scope) {
});
Je pense qu'il y a au moins trois façons d'organiser votre code de contrôleur:
TabController
S'il vous plaît jeter un oeil à la démo ci-dessous ou ici à jsfiddle .
C'est le ui-bootstrap
exemple de code avec les points mentionnés ci-dessus ajoutés.
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>
Voici une directive personnalisée à utiliser dans les onglets, afin que je puisse utiliser des contrôleurs personnalisés pour chaque onglet.
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>