Les onglets en angularjs ne fonctionnent pas correctement avec UI-routeur et UI-Bootstrap

Question

J'utilise une chaudière moyenne.js, vous pouvez trouver tout le code ici .

J'ai essayé d'ajouter 2 nouveaux onglets à la page rendue après l'un des articles sélectionnés dans la liste. Pour cette tâche, j'ai décidé d'utiliser à la fois l'UI-Router et Ui-Bootstrap pour Angular.js. Les 2 onglets ne fonctionnent pas correctement, je peux basculer entre eux et voir correctement leur contenu, mais de temps en temps, lorsque je revenir en arrière et que je sélectionne l'élément de menu de la liste d'articles, je reçois une page vierge avec les 2 onglets et rien d'autre.

Voici les modifications apportées à la vue-Article.client.view.html pour inclure 2 nouveaux onglets (le contenu précédent a été copié dans les 2 fichiers contenant la partielle pour les nouveaux onglets):

 <div ng-controller="ArticlesController">
   <tabset>
     <tab
            ng-repeat="t in tabs"
            heading="{{t.heading}}"
            select="go(t.route)"
            active="t.active">
     </tab>
   </tabset>
  <div ui-view></div>
 </div>

J'ai inséré dans le contrôleur d'article ces quelques lignes de code:

$scope.tabs = [
       { heading: 'SubA', route:'viewArticle.SubA', active:false },
       { heading: 'SubB', route:'viewArticle.SubB', 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);
       });
   });

Voici la route.js

'use strict'
angular.module('articles').config(['$stateProvider',
   function($stateProvider) {
    $stateProvider.
    state('listArticles', {
        url: '/articles',
        templateUrl: 'modules/articles/views/list-articles.client.view.html'
    }).
    state('createArticle', {
        url: '/articles/create',
        templateUrl: 'modules/articles/views/create-article.client.view.html'
    }).
    state('viewArticle', {
        url: '/articles/:articleId',
        templateUrl: 'modules/articles/views/view-article.client.view.html'
    }).
    state('editArticle', {
        url: '/articles/:articleId/edit',
        templateUrl: 'modules/articles/views/edit-article.client.view.html'
    }).
    state('viewArticle.SubA', {
        url: '/SubA',
        templateUrl: 'modules/articles/views/view-article.client.view.SubA.html'
    }).

    state('viewArticle.SubB', {
        url: '/SubB',
        templateUrl: 'modules/articles/views/view-article.client.view.SubB.html'
    });
   }
]);

Answer 1

Cela a quelque chose à voir avec la directive sur l'onglet Bootstrap angular-UI et le rappel sélectionné ().Il semble que le rappel SELECT () dans TAB2 soit appelé lors de la navigation de TAB2.

J'ai changé:

`<tab  ng-repeat="t in tabs"  heading="{{t.heading}}" select="go(t.route)" active="t.active"> `</tab>

à:

`<tab  ng-repeat="t in tabs"  heading="{{t.heading}}"  ui-sref="{{t.route}}" active="t.active"> </tab>`

Et votre démo fonctionne maintenant.

http://plnkr.co/edit/efnfjoq8hftt6AZITCR67?p=preview

Answer 2

J'ai eu le même problème avec ui-bootstrap v0.11.2 , j'ai changé en v0.12.0 et ça a fonctionné!