Angular 表带标签不会在数据重新加载时打开任何标签

Question

我正在玩 angular 表带标签，遇到了一个问题，如果我重新加载标签所基于的数据，那么 none 个标签实际上是打开的。它只显示顶部 headers，但没有任何数据。如果您单击一个选项卡，它在实际打开的地方工作正常，但似乎无法让它自动执行。

我创建了一个 plunkr 来展示这个，只需点击切换数据按钮：

plunker

这是 html 的样子：

<div bs-active-pane="tabs.activeTab" bs-tabs>
  <div ng-repeat="tab in tabs" title="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
  </div>
  <button ng-click="switchData()">Switch Data</button>
</div>

和 JS：

$scope.tabs = [
  {title:'Home', content: 'Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.'},
  {title:'Profile', content: 'Food truck fixie locavore, accusamus mcsweeney\'s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.'},
  {title:'About', content: 'Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro fanny pack lo-fi farm-to-table readymade.', disabled: true}
];

$scope.tabs.activeTab = 1;

$scope.switchData = function() {
  var tabs2 = [
    {title:'Home2', content: 'dfsdfds'},
    {title:'Profile2', content: 'sfsdf'},
    {title:'About2', content: 'urw'}  
  ];
  $scope.tabs.activeTab = 0;
  $scope.tabs = tabs2;
};

Answer 1

两期：

1) 您将 $scope.tabs.activeTab 分配给 0，然后在下一行立即通过将制表符分配给具有 $scope.tabs = tabs2

的全新范围变量来覆盖它

2) 由于浏览器事件的工作方式，指令绑定与您的活动选项卡分配顺序不一致。将它的超时设置为 0，基本上就是说，"do this assignment in the next event cycle" 解决了您的问题。

Plunker

.controller('TabDemoCtrl', function($scope, $templateCache, $timeout) {

  $scope.switchData = function() {
    var tabs2 = [
      {title:'Home2', content: 'dfsdfds'},
      {title:'Profile2', content: 'sfsdf'},
      {title:'About2', content: 'urw'}  
    ];

    $scope.tabs = tabs2;

    $timeout(function () {
      $scope.tabs.activeTab = 1;
    }, 0)
  };

Angular 表带标签不会在数据重新加载时打开任何标签

Angular strap tabs doesn't open any tab on data reload

tabs

angularjs

angular-strap