Вкладки в Angularjs не работают должным образом с UI-маршрутизатором и UI-Bootstrap

Question

Я использую среднее значение .js Boeterplate, вы можете найти весь код здесь .

Я пытался добавить 2 новых вкладка на страницу, представленную после одного из статей, были выбраны из списка. Для этой задачи я решил использовать UI-маршрутизатор, так и UI-Bootstrap для Angular.js. 2 вкладка не работает должным образом, я могу переключаться между ними и правильно видеть их контент, но иногда, когда я вернусь и выбираю элемент меню списка артикул, я получаю пустую страницу с 2 вкладками и ничего больше.

Вот изменения в файле View-alte.Client.view.html, чтобы включить 2 новых вкладка (предыдущий контент был скопирован на 2 файла, содержащие частичную для новых вкладок):

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

.

Я вставил в элемент контроллера статьи эти несколько строк кода:

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

.

Вот мартор.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

Это есть что связано с Directive Tab ingular-ui Bootstrap, а также обратный вызов Select ().Похоже, что вызов выбора () в Tab2 вызывается при навигации от Tab2.

Я изменил:

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

.

to:

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

.

и ваша демонстрация работает сейчас.

http://plnkr.co/edit/efnfjoq8hft6azitcr67 kp=preview

Answer 2

У меня была такая же проблема с ui-bootstrap v0.11.2 , я поменял на v0.12.0 и он работал!