web-dev-qa-db-fra.com

Contrôleur AngularJS pour un onglet

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 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>

La page correspondante est  enter image description here

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>

 enter image description here

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) {

});
javascriptangularjstwitter-bootstraptabsng-controller
7
Nikhil

Je pense qu'il y a au moins trois façons d'organiser votre code de contrôleur:

  1. Tout en un TabController
  2. Directive personnalisée pour chaque onglet
  3. Ajoutez votre logique d’onglet à la fonction de rappel d’onglet.

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>

5
AWolf

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>

2
user3435330