Angular ui Registerkarte mit separaten Controllern für jede Registerkarte

Question

Ich möchte ein Bootstrap-Tabset mit jeder Registerkarte mit eigenen Controller machen. Kann mir jemand zeigen, in welche Richtung ich gehen soll.

Momentan habe ich mehrere Differenz-Controller erstellt, die ich gerne in einem Tabset verwenden würde, anstatt sie als eine andere Route anzuzeigen.

Ich weiß, ich könnte vortäuschen, indem die tabset in den Differenzregler Vorlagen mit den gegebenen Controller Tab als aktiv angezeigt wird, aber ich möchte ein Haupt TabController mit mehreren Kind-Controller in der Lage sein (für jeden Reiter)

Answer 1

Wenn Sie einen eckigen UI-Router verwenden, können Sie dafür geschachtelte Zustände verwenden.

• Einen abstrakten Zustand mit einer Ansicht, die die Tabs und eine verschachtelte ui-Ansicht enthält
• für jede Ihrer Tabs ein Kind Zustand erstellen, die jeweils von dem abstrakten Zustand Vererbungs

• Jeden Staat Kind kann stellen Sie den Inhalt der verschachtelten ui-Ansicht, und definieren einen Controller

  $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

Warum Sie nicht über eine Richtlinie auf den einzelnen Registerkarten setzen, die einen eigenen Controller hat? Wenn Sie 1.x verwenden Trennen Sie Ihren Code durch Richtlinie nicht Tabs