[英]Angular UI bootstrap tabs - Can't change tabs with a button inside a tab
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. 我正在尝试使用tab指令
uib-tabset
的按钮更改我的活动选项卡,但该按钮仅在此指令外工作。
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. 在你的情况下, uib-tab指令中的
ng-click
正在尝试写入外部作用域原始变量,但是在本地作用域上创建具有相同名称( 活动 )的局部变量,从而断开与外部作用域的连接。 The easiest way is to add $parent.$parent to your inner click: 最简单的方法是在内部点击中添加$ parent。$ parent:
ng-click="$parent.$parent.active = 0"
which will reach correct outer scope ( outer scope -> uib-tabset -> uib-tab ) and then modify its variable, 这将达到正确的外部范围( 外部范围 - > uib-tabset - > uib-tab )然后修改其变量,
another better solution is to use objects and modify its property (like model.active ) when interacting between parent - child scopes: 另一个更好的解决方案是在父子范围之间进行交互时使用对象并修改其属性(如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>
Reasonably sure there is some miscommunication between the two scopes on the page ( uib-tabset
is likely creating it's own scope that doesn't track your scopes active
variable as well as we might like). 合理地确定页面上的两个作用域之间存在一些错误的通信(
uib-tabset
可能会创建它自己的作用域,它不跟踪我们可能喜欢的作用域active
变量)。
Check out this working plunker - you'll note it uses ctrl as
syntax to more explicitly define which scopes variable to set with ng-click
. 看看这个工作的plunker - 你会注意到它使用
ctrl as
语法来更明确地定义哪些范围变量用ng-click
设置。
Here is a question regarding 2-way-binding issues within the uib-tabset
scope found here that is the likely cause of the issue. 以下是有关此处找到的
uib-tabset
范围内的双向绑定问题的问题,这可能是导致问题的原因。 I would suggest using ctrl as
or you could bind to a $scope function to set $scope.active
instead of binding to the active
variable itself. 我建议使用
ctrl as
或者你可以绑定到$ scope函数来设置$scope.active
而不是绑定到active
变量本身。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.