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

Question

我有一个简单的场景。两个选项卡，选项卡 1 和 2。需要能够通过 link select 选项卡 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' 但它似乎不起作用。

Answer 1

最好更新范围变量并将其绑定到选项卡的 active 属性：

$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

Answer 2

最新版本的uib（2.4.0）应该是这样的：

在控制器中：

$scope.activeTab = 1;

在视图中：

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

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

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

tabs

angularjs