Angular UI bootstrap選項卡 - 無法使用選項卡內的按鈕更改選項卡

我試圖用選項卡指令uib-tabset中的按鈕更改我的選項卡，但該按鈕僅在此指令的OUTSIDE外部工作。Angular UI bootstrap選項卡 - 無法使用選項卡內的按鈕更改選項卡

我在做什麼錯？

下面的代碼：

<button type="button" class="btn btn-default btn-sm" ng-click="active = 0">Select first tab - exterior button</button> 

<div class="tabs-container"> 
    <uib-tabset active="active"> 
     <uib-tab index="0" heading="tab one"> 
      tab one 
     </uib-tab> 
     <uib-tab index="1" heading="tab two"> 
      tab two 
      <button type="button" class="btn btn-default btn-sm" ng-click="active = 0">Select first tab - internal button</button> 
     </uib-tab> 
     <uib-tab index="2" heading="tab three"> 
      tab three 
     </uib-tab> 
    </uib-tabset> 
</div>

來源

2016-10-04 Robson

內你的情況UIB標籤指令ng-click試圖寫入到外部範圍基本變量，而是創建了在本地範圍相同的名稱（活躍）局部變量，從而打破連接到外部範圍。最簡單的方法是添加$父$家長自己內心點擊：

ng-click="$parent.$parent.active = 0"

將達到正確的外部範圍（外範圍 - > UIB-標籤集 - > UIB標籤），然後修改它的變量。，

另一種更好的解決方案是使用對象並修改其屬性（如model.active）母公司之間的交互時 - 子作用域：

<button type="button" 
     class="btn btn-default btn-sm" 
     ng-click="model.active = 0"> 
    Select first tab - exterior button 
</button> 

<div class="tabs-container"> 
    <uib-tabset active="model.active"> 
    <uib-tab index="0" heading="tab one"> 
     tab one 
    </uib-tab> 
    <uib-tab index="1" heading="tab two"> 
     tab two 
     <button type="button" 
       class="btn btn-default btn-sm" 
       ng-click="model.active = 0"> 
      Select first tab - internal button 
     </button> 
    </uib-tab> 
    <uib-tab index="2" heading="tab three"> 
     tab three 
    </uib-tab> 
    </uib-tabset> 
</div>

來源

2016-10-04 20:25:24 Andriy

創建上的一個功能：setCurrentTab（...）。它會斷言設置值的正確位置。使用像ng-click =「setCurrentTab（0）」 –

在我的回答中沒有使用或需要控制器 – Andriy

有理由相信有（uib-tabset頁面上的兩個範圍之間的一些誤解很可能創造它自己的範圍，不跟蹤範圍active變量，以及我們可能喜歡）。

看看這個working plunker - 你會注意到它使用ctrl as語法來更明確地定義使用ng-click來設置哪個範圍變量。

下面是關於uib-tabset範圍found here這是問題的可能原因中的2路結合問題的問題。我建議使用ctrl as或者您可以綁定到$ scope函數來設置$scope.active而不是綁定到active變量本身。

來源

2016-10-04 20:12:03

Angular UI bootstrap選項卡 - 無法使用選項卡內的按鈕更改選項卡

回答

相關問題