정적 콘텐츠로 angularjs 부트 스트랩 탭에서 활성화하는 방법

Question

정적 콘텐츠가있는 탭셋을 표시하기 위해 앵귤러 부트 스트랩 UI를 사용하고 있습니다. 내가 포함하는 부트 스트랩 스크립트는 ui-bootstrap-tpls-0.6.0.min.js입니다. 여기

내 마크 업입니다 : 나는 겨 - 클래스 탭에 적용하지 않을 경우 여기

<tabset> 
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}"> 
     <tab-heading> 
      tab1 
     </tab-heading> 
     <div> 
      tab content 1 
     </div> 
    </tab> 
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}"> 
     <tab-heading> 
      tab2 
     </tab-heading> 
     <div> 
      tab content 2 
     </div> 
    </tab> 
</tabset> 

컨트롤러

function myController($scope) { 
    $scope.hideme = false; 
}); 

, 그것은 것을 제외하고 잘 작동 할 때 첫째 탭 숨기기 및 두 번째 탭 표시 ($ scope.hideme = false), 첫 번째 탭의 내용이 표시됩니다.

ng-class를 추가하면 angularjs에서 오류가 발생합니다. 오류 : [$ parse : syntax] http://errors.angularjs.org/undefined/ $ parse/syntax? p0 = % 7B & p1 = % 20an % 20 예기치 않은 % 20token & p2 = 16 & p3 = % 7 활동 % 3Afalse % 7D % 20 % 7 활동 % 3A % 20 % 2C % 20disabled % 3A % 20disabled % 7D & p4 = % 7Bactive % 3A % 20disabled % 3A % 20Disabled % 7D

특정 탭을 활성화하는 올바른 방법은 무엇입니까?

Answer 1

표시/숨기기 논리를 사용하지 않는 것이 좋습니다. UI Bootstrap Tab documentation은 ng-repeat를 사용하여 바인딩으로 생성 된 탭에 대해서만 탐색을 표시하기 때문에이 또한 좌절감을 나타 냈습니다.

하지만 tabset 지시어의 탭을 $ parentScope.tabs로 참조 할 수 있다고 생각합니다. 그래서 간단한 탐색 $parent.tabs[2].select()를 사용 가능하다 :

<tabset> 
    <tab heading="Tab 1"> 
    <button class="btn btn-success" ng-click="$parent.tabs[2].select()">Go to Tab 3</button> 
    </tab> 
    <tab heading="Tab 2"> 
    <p>Tab 2 contents</p> 
    </tab> 
    <tab heading="Tab 3"> 
    <button class="btn btn-danger" ng-click="$parent.tabs[0].select()">Back to Tab 1</button> 
    </tab> 
</tabset> 

이 도움이된다면 나는 working Plunker example 있습니다.