Las pestañas en AngularJs no funcionan correctamente con UI-Router y UI-Bootstrap

Question

Estoy usando una placa de calderilla media. Puede encontrar el código completo aquí .

Intenté agregar 2 nuevas pestañas a la página renderizada después de que se hayan seleccionado uno de los artículos de la lista. Para esta tarea, decidí usar el enrutador UI y la UI-Bootstrap para Angular.js. Las 2 pestañas no funcionan correctamente, puedo cambiar entre ellos y verlos correctamente, pero ocasionalmente cuando regrese y selecciono el elemento del menú de la lista de artículos, obtengo una página en blanco con las 2 pestañas y nada más.

Aquí están los cambios en el archivo View-Article.Client.View.html para incluir 2 pestañas nuevas (el contenido anterior se ha copiado en los 2 archivos que contienen el parcial para las nuevas pestañas):

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

He insertado en el controlador de artículos estas pocas líneas de código:

$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);
       });
   });

Aquí está la ruta.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

Esto tiene algo que ver con la directiva de la pestaña Bootstrap Angular-UI, y la devolución de llamada Seleccionar ().Parece que la devolución de llamada Select () en TAB2 se llama al navegar lejos de TAB2.

Cambié:

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

a:

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

y su demostración funciona ahora.

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

Answer 2

Tuve el mismo problema con ui-bootstrap v0.11.2 , cambié a v0.12.0 y funcionó!