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

问题描述

我正在尝试使用选项卡指令 uib-tabset 内的按钮更改我的活动选项卡，但该按钮仅在此指令之外工作.

我做错了什么?

代码如下:

<button type="button" class="btn btn-default btn-sm" ng-click="active = 0">选择第一个标签-外部按钮</button><div class="tabs-container"><uib-tabset active="active"><uib-tab index="0"heading="tab one">标签一</uib-tab><uib-tab index="1"heading="tab 2">标签二<button type="button" class="btn btn-default btn-sm" ng-click="active = 0">选择第一个标签-内部按钮</button></uib-tab><uib-tab index="2"heading="tab 3">标签三</uib-tab></uib-tabset>

解决方案

ng-click 在您的情况下 uib-tab 指令中尝试写入外部作用域原语变量，但会在局部作用域上创建同名的局部变量(active)，从而断开与外部作用域的连接.最简单的方法是将 $parent.$parent 添加到您的内部点击中:

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

它将到达正确的外部作用域(外部作用域 -> uib-tabset -> uib-tab)，然后修改其变量，

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

选择第一个选项卡 - 外部按钮<div class="tabs-container"><uib-tabset active="model.active"><uib-tab index="0"heading="tab one">标签一</uib-tab><uib-tab index="1"heading="tab 2">标签二<按钮类型=按钮"class="btn btn-default btn-sm"ng-click="model.active = 0">选择第一个选项卡 - 内部按钮</uib-tab><uib-tab index="2"heading="tab 3">标签三</uib-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.

What am I doing wrong?

Here's the code:

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

解决方案

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"

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

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