angularjs - angularjs中的选项卡无法与UI-Router和UI-bootstrap一起使用

Question

我使用的是MEAN.js样板，您可以找到整个代码here。

从列表中选择其中一篇文章后，我尝试将2个新标签添加到呈现的页面。
对于此任务，我决定同时将UI-Router和UI-Bootstrap用于Angular.js。
2个选项卡无法正常工作，我可以在它们之间进行切换并正确查看其内容，但是有时当我返回并选择“文章列表”菜单项时，会出现空白页面，其中没有2个选项卡。

这是对view-article.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>

我已将以下几行代码插入到article Controller 中:

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

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

这与angular-ui bootstrap选项卡指令和select()回调有关。从tab2导航离开时，似乎正在调用tab2中的select()回调。

我变了:

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

您的演示现在可以正常工作了。

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