[英]Angular bootstrap ui tabs ngMessage doesn't work in the first tab
[英]Angular UI bootstrap tabs - Can't change tabs with a button inside a tab
我正在尝试使用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-tab指令中的ng-click
正在尝试写入外部作用域原始变量,但是在本地作用域上创建具有相同名称( 活动 )的局部变量,从而断开与外部作用域的连接。 最简单的方法是在内部点击中添加$ 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
可能会创建它自己的作用域,它不跟踪我们可能喜欢的作用域active
变量)。
看看这个工作的plunker - 你会注意到它使用ctrl as
语法来更明确地定义哪些范围变量用ng-click
设置。
以下是有关此处找到的uib-tabset
范围内的双向绑定问题的问题,这可能是导致问题的原因。 我建议使用ctrl as
或者你可以绑定到$ scope函数来设置$scope.active
而不是绑定到active
变量本身。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.