Fehler: [$ compile: nonassign] Ausdruck verwendet mit Direktive 'UibTab' ist nicht zuweisbar

Question

Ich habe ein einfaches Szenario. Zwei Registerkarten, Registerkarte 1 & 2. Sie müssen Tab 1 über einen Link auswählen können.

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

$scope.activeTab = false; 

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

Plunker ist hier: http://plnkr.co/edit/5yBHmXZBHyWYZEtmshad?p=info

Wenn in Tab 1 oder 2 klicken, ich die folgende Fehlermeldung erhalten:

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

Ich könnte diesen Ausdruck 'activeTab==true' zu einem kürzeren Weg wie 'ActiveTab' ändern, aber es scheint nicht zu funktionieren.

Answer 1

Es ist besser, einen Bereich Variable zu aktualisieren und binden Sie es an active Attribut Ihrer Registerkarten:

$scope.activeTab = []; 

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

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

Ihrer Ansicht:

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

ich die plunkr

Diese aktualisiert macht auch die Implementierung mehr wiederverwendbar als zuvor (Zum Beispiel kann es leicht in einem ng-repeat verwendet werden, wenn die Notwendigkeit aris es).

Referenz: GitHub Issue

Answer 2

Für die neueste Version von uib (2.4.0) es so sein sollte:

In Controller:

$scope.activeTab = 1; 

In Ansicht:

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