각도 UI 탭을 사용할 때 이상한 동작

Question

In this plunk 사용자는 세 개의 링크 중 하나를 클릭 할 수 있어야합니다. 각 링크에는 사용자가 링크를 클릭 할 때 표시되는 관련 div이 있습니다. 또한 링크를 클릭하면 색상이 빨간색으로 바뀝니다.

문제는 링크 (Show 10)가 작동하지 않고 div가 표시되지 않고 텍스트가 빨간색으로 변하지 않았기 때문입니다.

plunk의 필드는 각도 UI 탭으로 둘러 쌉니다. 탭이 제거 된 경우 (see here) 문제가 사라집니다. 이 문제를 해결하는 방법?

HTML이 a 태그 (탭 버전)

<div ng-controller="ctl"> 

     <uib-tabset style="height:500px"> 
      <uib-tab> 
      <a href="javascript:void(0)" 
        ng-style="{'color': showItem == 0 ? 'red' : 'blue' }" 
        ng-click="showItem=0" >Show 0</a> 
        <br> 
      <a href="javascript:void(0)" 
        ng-style="{'color': showItem == 10 ? 'red' : 'blue' }" 
        ng-click="displaySeries()">Show 10</a> 
        <br> 
      <a href="javascript:void(0)" 
        ng-style="{'color': showItem == 20 ? 'red' : 'blue' }" 
        ng-click="showItem=20" >Show 20</a> 
      <div ng-show="showItem==0"> 
        zero 
      </div> 
      <div ng-show="showItem==10"> 
        ten 
      </div> 
      <div ng-show="showItem==20"> 
        twenty 
      </div> 
      </uib-tab> 
     </uib-tabset> 
</div> 

자바 스크립트 (탭 버전)

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 

app.controller('ctl', function ($scope) { 
     $scope.showItem = 10; 

     $scope.displaySeries = function(){ 
      $scope.showItem = 10; 
     };  

}); 

Answer 1

, 당신은 입력 ng-click="showItem=10" (현재 당신이 ng-click="displaySeries()"이)