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

I'm playing around with angular strap tabs and got into an issue where if I reload the data that the tabs are based on then none of the tabs are actually open. It just shows the top headers, but no data for any of them. If you click a tab it works fine where it actually opens, but can't seem to make it do it automatically.

我正在玩角带标签并遇到一个问题,如果我重新加载标签所基于的数据,那么没有任何标签实际打开。它只显示顶部标题,但没有任何数据。如果单击一个选项卡,它在实际打开的位置可以正常工作,但似乎无法自动执行。

I've created a plunkr showing this, simply click the switch data button:

我创建了一个显示此功能的plunkr,只需单击开关数据按钮:

plunker

Here is what html looks like:

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

And the JS:

和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;
};

1 个解决方案

#1

Two issues:

1) You are assigning $scope.tabs.activeTab to 0, then in the next line immediately overwriting it by assigning tabs to a brand new scope variable with $scope.tabs = tabs2

1)您将$ scope.tabs.activeTab分配给0,然后在下一行中通过使用$ scope.tabs = tabs2将制表符分配给全新的范围变量来立即覆盖它

2) Because of the way browser events work, the directive binding is happening out of order with your active tab assignment. Setting it in an timeout of 0, which is basically saying, "do this assignment in the next event cycle" fixes your issue.

2)由于浏览器事件的工作方式,指令绑定与您的活动选项卡分配无关。将其设置为超时0,这基本上是说“在下一个事件周期中执行此分配”可以解决您的问题。

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

#1