Angular UI引导选项卡-无法使用选项卡内的按钮更改选项卡 [英] Angular UI bootstrap tabs - Can't change tabs with a button inside a tab

问题描述

我正在尝试通过选项卡指令uib-tabset内的按钮来更改活动选项卡，但是该按钮仅在该指令之外有效.

I'm trying to change my active tab with a button inside the tab directive uib-tabset, but the button is only working OUTSIDE this directive.

我在做什么错了?

代码如下:

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

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

推荐答案

ng-click试图写入外部作用域原始变量，但使用在本地范围内具有相同的名称( active )，从而断开与外部范围的连接.最简单的方法是将$ parent.$ parent添加到内部点击中:

ng-click within uib-tab directive in your case is trying to write to outer scope primitive variable, but creates local variable with the same name (active) on the local scope, thus breaking connection to outer scope. The easiest way is to add $parent.$parent to your inner click:

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

将达到正确的外部范围(外部范围-> uib-tabset-> uib-tab )，然后修改其变量，

which will reach correct outer scope (outer scope -> uib-tabset -> uib-tab) and then modify its variable,

另一个更好的解决方案是在父子作用域之间进行交互时使用对象并修改其属性(例如 model.active ):

another better solution is to use objects and modify its property (like model.active) when interacting between parent - child scopes:

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

这篇关于Angular UI引导选项卡-无法使用选项卡内的按钮更改选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！