コントローラから角度ブートストラップUIにアクセスする方法

Question

私はangularJSブートストラップタブセットを使用しようとしています。私の要件では、顧客にタブを切り替えるために次のボタンを追加する必要があります。ここで が私のコードです：コントローラ「CTR」で

<div ng-controller='ctr'> 
    <tabset> 
    <tab active='sqTab' heading="tab1"> 
     tabt 1  
    </tab> 
    <tab active='psTab' heading="tab2"> 
     tabt 2  
    </tab> 
    </tabset> 
    <button click='next()')>next</button> 
</div> 

：

$scope.sqTab = true; 
$scope.psTab = false; 
$scope.next = function(){ 
$scope.sqTab = false; 
$scope.psTab = true; 
} 

あなたが見ることができるように、私は各タブのためにアクティブに設定すると、ページのロード、それが正常に動作し、私は切り替えることができます私は次のヒット後タブ2に戻りますが、タブの頭をクリックして戻って次のボタンをもう一度押すと、機能しませんでした。ディレクティブが分離された理由である可能性があります。もしそうなら、なぜ私は最初に切り替えることができますか？私はそれを行うことができる方法はありますか？

Answer 1

AngularJS-UIブートストラップディレクティブを使用しませんでした。ここにあなたが持っているものに基づいて動作するサンプルがあります。文字列のインデックスを使用しているときに、それを引用符で囲む必要があることを

Javascriptを

angular.module('app', ['ui.bootstrap']) 
    .controller('ctrl', function($scope) { 
     $scope.activeTab = "sqTab"; 
     $scope.next = function() { 
      $scope.activeTab = "psTab"; 
     } 
    }); 

HTML

<div ng-app="app" ng-controller="ctrl"> 
    <form class="tab-form-demo"> 
     <uib-tabset active="activeTab"> 
      <uib-tab index="'sqTab'" heading="tab1"> 
       Here is some content on Tab 1 
      </uib-tab> 
      <uib-tab index="'psTab'" heading="tab2"> 
       Here is some different content on Tab 2 
      </uib-tab> 
     </uib-tabset> 
     <button ng-click="next()">next</button> 
    </form> 
</div> 

注意してください。また、すべてのブートストラップ要素のバージョンuib-を使用する必要があることにも注意してください。上記のコードを使用して、作業JSFiddleがあります。

Answer 2

次の、おそらく前のボタンでタブインデックスを列挙するために、スコープ変数を使用します。

$scope.activeTab = 0; 

    $scope.next = function() { 
    $scope.activeTab += 1; 
    }; 
    $scope.previous = function() { 
    $scope.activeTab -= 1; 
    }; 

HTML

<button ng-click="previous()" ng-disabled="activeTab===0">Previous</button> 
    <button ng-click="next()" ng-disabled="activeTab===1">Next</button> 
    <div> 
    <uib-tabset active="activeTab"> 
     <uib-tab index="0" heading="Tab 0"> 
     <div>This is tab 0</div> 
     </uib-tab> 
     <uib-tab index="1" heading="Tab 1"> 
     <div>This is tab 1</div> 
     </uib-tab> 
    </uib-tabset> 
    </div> 

コントローラは、ここで働いてplunkです。