Question

我尝试使用标签指令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"

将达到正确的外部范围（外部范围 - ＆gt; uib-tabset - ＆gt; 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变量以及我们可能会喜欢）。

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

以下问题涉及uib-tabset范围 found here 中的双向绑定问题，这可能是问题的原因。我建议使用ctrl as，或者你可以绑定到$ scope函数来设置$scope.active，而不是绑定到active变量本身。

Angular UI引导标签 - 无法使用标签

2 个答案: