Come caricare gli stati degli ui-router nel contenuto delle schede ui-bootstrap

Sto imparando angolare e ho cercato di caricare dinamicamente un frammento di file HTML nel riquadro del contenuto di una scheda.Come caricare gli stati degli ui-router nel contenuto delle schede ui-bootstrap

In this linked plunker ho creato un modulo angolare per configurare gli stati

var app = angular.module('Plunker', ['ui.router', 'ui.bootstrap']) 

    app.config([ 
     '$stateProvider', 
     '$urlRouterProvider', 
     function ($stateProvider, $urlRouterProvider) { 

      $stateProvider   
       .state("tab1", { url: "/tab1", templateUrl: "tab1.html" }) 
       .state("tab2", { url: "/tab2", templateUrl: "tab2.html" }) 
       .state("tab3", { url: "/tab3", templateUrl: "tab3.html" }); 
      $urlRouterProvider.otherwise('/'); 
     }]); 

    app.controller("tabsController", function ($rootScope, $scope, $state) { 

     $scope.tabs = [ 
      { title: "My Tab 1", route: "tab1", active: true }, 
      { title: "My Tab 2", route: "tab2", active: false }, 
      { title: "My Tab 3", route: "tab3", active: false }, 
     ]; 

     $scope.go = function (route) { 
      $state.go(route); 
     }; 

     $scope.active = function (route) { 
      return $state.is(route); 
     }; 

     $scope.$on("$stateChangeSuccess", function() { 
      $scope.tabs.forEach(function (tab) { 
       tab.active = $scope.active(tab.route); 
      }); 
     }); 
    });

e nel corpo index.html assegnare l'interfaccia utente consente di visualizzare un nome per associarlo con lo stato/percorso

<body ng-app="Plunker"> 
    <div ng-controller="tabsController"> 
     <uib-tabset> 
      <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled"> 

       <div ui-view="{{tab.route}}"></div> 

      </uib-tab> 
     </uib-tabset> 
    </div> 
    </body>

Ogni scheda dovrebbe avere contenuto proveniente dal rispettivo frammento di file html tab1.html, tab2.html o tab1.html. Ma non riesco a farlo funzionare. Qualsiasi aiuto nel rendere questo lavoro sarebbe molto apprezzato.

fonte

2015-10-14 Kickaha

se si desidera una scheda p er route, non hai bisogno di '' usa solo tabs css e link regolari – charlietfl

@charlietfl grazie lo terrò a mente. – Kickaha

Si desidera avere un partial per ogni scheda. Per questo, le funzioni con nome denominate di ui-router possono aiutarti. Non cambierai stato, ma avere il contenuto su viste dedicate ti consente di mantenere il modello principale leggero e organizzare in modo bello il tuo codice. Inoltre è possibile riutilizzare i modelli di schede altrove.

definizione di Stato in cui risiede il componente tabset:

$stateProvider 
    .state('example', { 
     url: '/example', 
     views: { 
      "tab1": { templateUrl: "tab1.html" }, 
      "tab2": { templateUrl: "tab2.html" }, 
      "tab3": { templateUrl: "tab3.html" }, 
    }

tabset definizione:

<uib-tabset> 
    <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" ...> 
     <div ui-view="{{tab.route}}"></div> <!-- ex: <div ui-view="tab1"></div> --> 
    </uib-tab> 
</uib-tabset>

Vedere updated plunker

fonte

2015-10-14 00:56:30

Grazie gentilmente. – Kickaha

Questo non si applica direttamente a ciò su cui sto lavorando, ma mi piace molto il tuo codice qui. Grazie! –

Come posso ottenere questo se ho un modello parziale di navigazione separato e all'interno di ogni elemento del menu c'è una voce ui-sref con la definizione di stato, voglio che il controller aggiunga un nuovo elemento di tabulazione e spinga tutto il contenuto proveniente dal templateUrl configure nel provider di stato. Attualmente ogni volta che faccio clic su un elemento, carica il contenuto all'interno dell'elemento di visualizzazione ui, quindi, anziché aggiungere una nuova scheda, aggiunge solo il contenuto nella prima scheda, non crea mai una nuova scheda –

Come caricare gli stati degli ui-router nel contenuto delle schede ui-bootstrap

risposta

Problemi correlati