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

Question

我正在嘗試使用tab指令uib-tabset的按鈕更改我的活動選項卡，但該按鈕僅在此指令外工作。

我究竟做錯了什么？

這是代碼：

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

Answer 1

在你的情況下， uib-tab指令中的ng-click正在嘗試寫入外部作用域原始變量，但是在本地作用域上創建具有相同名稱（ 活動 ）的局部變量，從而斷開與外部作用域的連接。 最簡單的方法是在內部點擊中添加$ parent。$ parent：

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

這將達到正確的外部范圍（ 外部范圍 - > uib-tabset - > uib-tab ）然后修改其變量，

另一個更好的解決方案是在父子范圍之間進行交互時使用對象並修改其屬性（如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>

Answer 2

合理地確定頁面上的兩個作用域之間存在一些錯誤的通信（ uib-tabset可能會創建它自己的作用域，它不跟蹤我們可能喜歡的作用域active變量）。

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

以下是有關此處找到的uib-tabset范圍內的雙向綁定問題的問題，這可能是導致問題的原因。 我建議使用ctrl as或者你可以綁定到$ scope函數來設置$scope.active而不是綁定到active變量本身。