Angular UI bootstrap 选项卡 - 无法使用选项卡内的按钮更改选项卡
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">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-tabset
很可能创建了它自己的作用域,它不会像我们希望的那样跟踪您的作用域 active
变量) .
查看此 working plunker - 您会注意到它使用 ctrl as
语法来更明确地定义要使用 ng-click
设置的范围变量。
这是一个关于 uib-tabset
范围 内的双向绑定问题的问题,这可能是问题的原因。我建议使用 ctrl as
或者您可以绑定到 $scope 函数来设置 $scope.active
而不是绑定到 active
变量本身。
ng-click
在 uib-tab 指令中你的情况是试图写入外部范围原始变量,但创建具有相同名称的局部变量(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>
我正在尝试使用选项卡指令内的按钮更改我的活动选项卡 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>
有理由确定页面上的两个作用域之间存在一些错误传达(uib-tabset
很可能创建了它自己的作用域,它不会像我们希望的那样跟踪您的作用域 active
变量) .
查看此 working plunker - 您会注意到它使用 ctrl as
语法来更明确地定义要使用 ng-click
设置的范围变量。
这是一个关于 uib-tabset
范围 ctrl as
或者您可以绑定到 $scope 函数来设置 $scope.active
而不是绑定到 active
变量本身。
ng-click
在 uib-tab 指令中你的情况是试图写入外部范围原始变量,但创建具有相同名称的局部变量(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>