Onglet UI angulaire avec des contrôleurs séparés pour chaque onglet

Question

Je voudrais faire un tabque bootstrap avec chaque onglet ayant son propre contrôleur.Quelqu'un peut-il me dire dans quelle direction je devrais aller.

Actuellement, j'ai fait plusieurs contrôleurs de différence que je voudrais être utilisé dans un tabâtre au lieu de les avoir affiché comme un itinéraire différent.

Je sais que je pouvais le simuler en ayant le tablé dans les modèles de contrôleur de différence affichant l'onglet Contrôleurs donnés comme actif, mais j'aimerais pouvoir avoir une technicienne principale avec plusieurs contrôleurs d'enfants (pour chaque onglet)

Answer 1

Si vous utilisez un routeur d'interface utilisateur angulaire, vous pouvez utiliser des états imbriqués pour le faire.

• Créez un état abstrait avec une vue contenant les onglets et une vue utile imbriquée
• Créez un état enfant pour chacun de vos onglets, chacun héritant de l'état abstrait

• Chaque état enfant peut définir le contenu de la vue utile imbriquée et définir un contrôleur

   $stateProvider.state( 'tabs', {
      abstract: true,
          url: 'tabs',
          views: {
            "tabs": {
              controller: 'TabsCtrl',
              templateUrl: 'tabs.html'
            }
          }
        })
        .state('tabs.tab1', {
            url: '',  //make this the default tab
            views: {
            "tabContent": {
              controller: 'Tab1Ctrl',
              templateUrl: 'tab1.html'
            }
          }
        })
        .state('tabs.tab2', {
            url: '/tab2',
            views: {
            "tabContent": {
              controller: 'Tab2Ctrl',
              templateUrl: 'tab2.html'
            }
          }
        });
  

Answer 2

Pourquoi ne mettez-vous pas une directive sur chaque onglet qui a son propre contrôleur?Si vous utilisez 1.x.Séparez votre code par la directive non onglets