Guias em angularjs não funcionar corretamente com o INTERFACE de utilizador do Router e INTERFACE do usuário-bootstrap

Question

Eu estou usando um MEAN.js clichê, você pode encontrar todo o código aqui.

Eu tentei adicionar 2 de novas guias para a página processada depois de um dos artigos foram selecionados a partir da lista.Para esta tarefa, eu decidi usar a INTERFACE do usuário do Roteador e INTERFACE do usuário-Bootstrap para Angular.js.Os 2 guias não funciona corretamente, eu posso alternar entre eles e ver correctamente o seu conteúdo, mas, ocasionalmente, quando eu voltar e selecionar o artigo de lista de item de menu, aparece uma página em branco com as 2 abas e nada mais.

Aqui é a mudança para a view-article.client.view.html arquivo para incluir 2 novas guias (o antigo conteúdo foi copiado para os 2 arquivos que contém o parcial para o novo abas ):

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

Eu tenho inserido o artigo controlador estas poucas linhas 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);
       });
   });

Aqui está o 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

Isso tem algo a ver com angular-ui bootstrap guia directiva, e o select() de chamada de retorno.Parece que o select() de retorno no tab2 está sendo chamado ao navegar longe de tab2.

Eu mudei:

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

para:

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

e o demo que funciona agora.

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

Answer 2

Eu tive o mesmo problema com interface do usuário-boostrap v0.11.2, eu mudei para v0.12.0 e funcionou!