angularjs – 错误：[$compile：nonassign]与指令’uibTab’一起

发布时间：2020-12-17 07:29:08 所属栏目：安全来源：网络整理

导读：我有一个简单的场景.两个标签,标签1 2.需要能够通过链接选择标签1. HTML： p a href="#" ng-click="selectTab1()" span class="glyphicon glyphicon-plus-sign"/span Select TAB 1 /a/puib-tabset uib-tab heading="Tab 1" active="activeTab==true" ng-clic

我有一个简单的场景.两个标签,标签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’这样的更短的方式,但它似乎不起作用.

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

$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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!