Angular UI-Bootstrap 选项卡：未设置活动选项卡答案

【问题标题】：Angular UI-Bootstrap tabs: not set active tabAngular UI-Bootstrap 选项卡：未设置活动选项卡
【发布时间】：2017-01-09 21:01:07
【问题描述】：

我有 this plunkr 有一个系统可以动态添加标签。

当我添加一个新标签时，它被设置为活动标签。当我添加两个选项卡，单击第一个选项卡并添加一个新选项卡时，问题就出现了。使用此顺序，新插入的选项卡不会设置为活动状态。

这是html代码：

<div ng-controller="TabsDemoCtrl">
  {{activeTabIndex}}
  <uib-tabset active="activeTabIndex">
    <uib-tab ng-repeat="tab in tabs" index="tab.id">

        <uib-tab-heading>{{ tab.title }} <a ng-click="removeTab(tab.id)" href=''>(del)</a> </uib-tab-heading>

        {{tab.content}}

    </uib-tab>
  </uib-tabset>

  <div ng-controller="BtnCtrl">
    <div class="btn btn-primary" ng-click="addTab()">Add</div>
  </div>

</div>

还有控制器：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);

angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($rootScope, $scope) {

  $rootScope.activeTabIndex = 0;
  $rootScope.tabs = [];

  //Close tab
  $scope.removeTab = function(index)
  {
      var tabsLength = $scope.tabs.length -1;

      for (var i=0; i < $scope.tabs.length; i++)
      {
          if ($scope.tabs[i].id == index)
          {
              $scope.activeTabIndex = $scope.tabs[tabsLength].id;
              $scope.tabs.splice(i, 1);

          }
      }
  };

})

angular.module('ui.bootstrap.demo').controller('BtnCtrl', function ($timeout, $scope, $rootScope) {

  //Add new tabs
  $scope.addTab = function()
  {
    var newTab = {
        title: 'new tab',
        content: 'content here',
        id: makeid()
    };

    $rootScope.tabs.push(newTab);

    $timeout(function() 
    {
        $rootScope.activeTabIndex = newTab.id;
    });

  }

  function makeid()
  {
    var text = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < 5; i++ )
        text += possible.charAt(Math.floor(Math.random() * possible.length));

    return text;
  }

});

【问题讨论】：

标签： angularjs tabs angular-ui-bootstrap angular-ui-bootstrap-tab

【解决方案1】：

这是一个正常工作的插件：https://plnkr.co/edit/pucttzsZNMvaZJY13IOq?p=preview

我认为问题在于您在模板中引用了activeTabIndex 而没有$root 像这样进行：

active="$root.activeTabIndex"

这实际上也等同于，模板外部是$scope.$root.activeTabIndex，这是模板内部$rootScope 的便捷方法。尽管$rootScope 高于所有其他范围，但当您访问位于隔离范围 中的模板中的变量时，它始终被假定为$scope 的属性。 uib-tab 可能正在创建一个隔离作用域，这使得$rootScope 对指令不可用。

【讨论】：