Угловая вкладка пользовательского интерфейса не обновляется после скрытия

Я пытаюсь скрыть вкладки, а затем отобразить их, но столкнулся с проблемой обновления. На самом деле, если я выбираю одну диаграмму, а затем нажимаю кнопку скрытия, чтобы отобразить сетку, она скрывает другие вкладки, но всегда отображает диаграммы nvD3 вместо сетки пользовательского интерфейса. даже на вкладке диаграмм, если я выберу вкладку 2, затем нажму кнопку скрытия, а затем кнопку «Показать», она активирует первую вкладку, но со второй выбранной диаграммой, а не с первой.

<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 для примера, который я пытаюсь


angularjs angular-ui-bootstrap angular-ui-grid angular-nvd3
person Mohamed NAOUALI    schedule 21.05.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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>
person Mohamed NAOUALI    schedule 22.05.2016