Error: [$compile:nonassign] Expression used with directive 'uibTab' is non-assignable

I've a simple scenario. Two tabs, tab 1 & 2. Need to be able to select Tab 1 via link.

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>

 Controller code here:

  $scope.activeTab = false;

  $scope.selectTab1 = function() {
    $scope.activeTab = true;
  }
  $scope.clickTab1 = function() {
    $scope.activeTab = true;
  }
  $scope.clickTab2 = function() {
    $scope.activeTab = false;
  }

Plunker is here: http://plnkr.co/edit/5yBHmXZBHyWYZEtmshad?p=info

When clicking in Tab 1 or 2, I'm getting the following error:

Error: [$compile:nonassign] Expression 'activeTab==true' used with directive 'uibTab' is non-assignable!

I could change this expression 'activeTab==true' to a shorter way like 'activeTab' but It doesn't seems to be working.

2 Answers

1、It is better to update a scope variable and bind it to active attribute of your tabs:

$scope.activeTab = [];

$scope.selectTab1 = function(index) {
    $scope.activeTab[index] = true;
  };

$scope.clickTab = function(index) {
  $scope.activeTab[index] = true;
};

In your view:

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

I have updated the plunkr

This also makes the implementation to be more re-usable than before (For instance, it can be easily used inside a ng-repeat if the need arises).

Reference: GitHub Issue

2、For the latest version of uib (2.4.0) it should be like this:

In controller:

$scope.activeTab = 1;

In view:

<uib-tabset active="activeTab">
    <uib-tab index="0" heading="Tab 1">
        Content 1
    </uib-tab>
    <uib-tab index="1" heading="Tab 2">
        Content 2
    </uib-tab>
</uib-tabset>

转载于:https://my.oschina.net/u/2391658/blog/3025163

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值