Angular UI引导选项卡-无法使用选项卡内的按钮更改选项卡答案

【问题标题】：Angular UI bootstrap tabs - Can't change tabs with a button inside a tabAngular UI引导选项卡-无法使用选项卡内的按钮更改选项卡
【发布时间】：2016-10-04 19:35:16
【问题描述】：

我正在尝试使用选项卡指令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>

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui-bootstrap-tab

【解决方案1】：

在您的情况下，uib-tab 指令中的

ng-click 正在尝试写入外部范围原始变量，但会创建具有相同名称（active）的局部变量本地范围，从而断开与外部范围的连接。最简单的方法是将 $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>

【讨论】：

在控制器上创建一个函数：setCurrentTab(...)。它将断言设置值的正确位置。使用像 ng-click="setCurrentTab(0)"

【解决方案2】：

可以合理地确定页面上的两个作用域之间存在一些沟通不畅（uib-tabset 可能会创建它自己的作用域，它不会像我们希望的那样跟踪你的作用域active 变量）。

查看此working plunker - 您会注意到它使用ctrl as 语法更明确地定义使用ng-click 设置的范围变量。

这里有一个关于uib-tabset 范围found here 内的双向绑定问题的问题，这可能是问题的原因。我建议使用 ctrl as 或者您可以绑定到 $scope 函数来设置 $scope.active 而不是绑定到 active 变量本身。

【讨论】：