1

角度のあるストラップを使用して 3 つのタブ パネルを表示しています。角度のあるストラップの bs-tabs ディレクティブを tabbed-Panel ディレクティブでラップします。将来的には、タブ付きパネル全体をディレクティブでアニメーション化できるようにします。ちゃんと表示されます。私が理解できないのは、私のディレクティブでタブ (ng-repeat オブジェクト) のクリックを処理する方法です。ディレクティブ内にコントローラーがあり、それを使用してタブデータを表示しますが、タブのクリック (onTabClick) を処理する方法がわかりません...これが正しい方法ですか、それともリンクを使用する必要がありますか? （以下でコメントアウトしました）？

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <tabbed-Panel class="bottomTabPanel">
      <div data-fade="1" ngModel="activeTab" bs-Tabs>
        <div ng-repeat="tab in tabs" data-title="{{tab.title}}">
          <p ng-click="onTabClick(tab)">{{tab.content}}</p>
        </div>
      </div>
    </tabbed-Panel>
  </body>
</html>

指令：

angular.module('directives', ['opsimut','$strap.directives'])
  .directive('tabbedPanel',function() {
    return {
      restrict:"E",

      controller: function($scope) {      
        $scope.tabs = [
          {title:'Question 1', content: 'Question 1 content here'},
          {title:'Question 2', content: 'Question 2 content here'},
          {title:'Indication', content: 'Indication content here'}
        ];

        $scope.tabs.activeTab = 2; 

        $scope.onTabClick = function(tab) {
            debugger;
        }                            
      }
    };
});
4

1 に答える 1