Angular ui-标签页隐藏后不刷新

Question

我想要隐藏标签然后显示它们，但我遇到了一个令人耳目一新的问题。事实上，如果我 select 一个图表然后单击隐藏按钮以显示网格，它会隐藏其他选项卡，但它始终显示 nvD3 图表而不是 ui-网格。即使在图表选项卡中，如果我 select 选项卡 2 然后单击隐藏按钮，然后显示按钮，它将激活第一个选项卡，但第二个图表 selected 而不是第一个。

<uib-tabset>
<uib-tab heading="Test1" ng-hide=hideCharts>
  <nvd3 options="options" data="data"></nvd3>
</uib-tab>
<uib-tab heading="Test2" ng-hide=hideCharts>
  <nvd3 options="options" data="data1"></nvd3>
</uib-tab>
<uib-tab heading="Test3" ng-hide=hideCharts>
  <nvd3 options="options" data="data2"></nvd3>
</uib-tab>
<uib-tab heading="Test4">
  <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
</uib-tab>
</uib-tabset>

这是我正在尝试的示例 plunker

Answer 1

ng-hide 不会删除选项卡组件，这将导致其状态仍被跟踪。我使用 ng-if 而不是 ng-id 解决了这个问题。这是一个 plunker 的解决方案

  <uib-tabset>
<uib-tab heading="Test1" ng-if=hideCharts index="1">
  <nvd3 options="options" data="data"></nvd3>
</uib-tab>
<uib-tab heading="Test2" ng-if=hideCharts index="2">
  <nvd3 options="options" data="data1"></nvd3>
</uib-tab>
<uib-tab heading="Test3" ng-if=hideCharts index="3">
  <nvd3 options="options" data="data2"></nvd3>
</uib-tab>
<uib-tab heading="Test4">
  <div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
</uib-tab>
</uib-tabset>

Angular ui-标签页隐藏后不刷新

Angular ui-tab not refreshing after hiding

angularjs

angular-ui-bootstrap

angular-ui-grid

angular-nvd3