我有一个简单的场景.两个标签,标签1& 2.需要能够通过链接选择标签1.
HTML：
<p>
<a href="#" ng-click="selectTab1()">
<span class="glyphicon glyphicon-plus-sign"></span> Select TAB 1
</a>
</p>
<uib-tabset>
<uib-tab heading="Tab 1" active="activeTab==true" ng-click="clickTab1()">
Content 1
</uib-tab>
<uib-tab heading="Tab 2 (default)" active="activeTab==false" ng-click="clickTab2()">
Content 2
</uib-tab>
</uib-tabset>
控制器代码：
$scope.activeTab = false;
$scope.selectTab1 = function() {
$scope.activeTab = true;
}
$scope.clickTab1 = function() {
$scope.activeTab = true;
}
$scope.clickTab2 = function() {
$scope.activeTab = false;
}
Plunker在这里：
http://plnkr.co/edit/5yBHmXZBHyWYZEtmshad?p=info
单击选项卡1或2时,我收到以下错误：
Error: [$compile:nonassign] Expression 'activeTab==true' used with directive 'uibTab' is non-assignable!
我可以将这个表达式’activeTab == true’更改为像’activeTab’这样的更短的方式,但它似乎不起作用.
最好更新范围变量并将其绑定到选项卡的活动属性：
原文链接：https://www.f2er.com/angularjs/142136.html$scope.activeTab = [];
$scope.selectTab1 = function(index) {
$scope.activeTab[index] = true;
};
$scope.clickTab = function(index) {
$scope.activeTab[index] = true;
};
在你看来：
<uib-tab heading="Tab 1" active="activeTab[0]" ng-click="clickTab(0)"> Content 1 </uib-tab> <uib-tab heading="Tab 2 (default)" active="activeTab[1]" ng-click="clickTab(1)"> Content 2 </uib-tab>
我更新了plunkr
这也使得实现比以前更容易重复使用(例如,如果需要,它可以很容易地在ng-repeat中使用).
参考：GitHub Issue
