タブのカスタムディレクティブを作成しました。次のボタンをクリックすると次のタブに移動し、戻るボタンをクリックすると前のタブに移動する必要があります

Question

私のMain.Htmlにはタブの指示が含まれています。

<div class="modal-header"> 
    <span class="modal-title">Add Report Template</span> 
    <div class="closeButton right" ng-click="closeModal()"></div> 
</div> 
<div class="modal-body"> 
    <tab-set> 
    <tab heading="1st Tab"> 
     This is the content for 1st Tab  
    </tab> 
    <tab heading="2nd Tab"> 
     This is the content for 2nd tab 
    </tab> 
    <tab heading="3rd Tab"> 
     This is the content for 3rd tab. 
    </tab> 
    </tab-set> 
</div> 
<div class="modal-footer"> 
    <div> 
    <button type="text" class="grayButton right" ng-click="goToNextTab()">Next</button> 
    <button type="text" class="grayButton left" ng-click="goToPreviousTab()">Back</button> 
    </div> 
</div> 

マイMain.controller私は3つのタブが表示さ

(function() { 
    'use strict'; 

    angular 
     .module('myApp') 
     .controller('Controller', ['$scope', function($scope,) { 
      var vm = this; 
      /////////////// Function to Change tab on click of the Back/Next Button /////////////// 
      $scope.goToNextTab = function() { 

      }; 

      $scope.goToPreviousTab = function() { 

      }; 
     }]); 
})(); 

次と戻るボタンの機能を定義するマイタブセットディレクティブが必要。

angular 
    .module('myApp') 
    .directive('TabSet', function() { 
     return { 
      restrict: 'E', 
      transclude: true, 
      scope: { }, 
      templateUrl: 'tabset.html', 
      bindToController: true, 
      controllerAs: 'tabs', 
      controller: function($scope) { 
       var self = this; 
       self.tabs = []; 
       self.addTab = function addTab(tab) { 
        self.tabs.push(tab); 
        if(self.tabs.length === 1) { 
         tab.active = true; 
        } 
       }; 
       self.select = function(selectedTab) { 
        angular.forEach(self.tabs, function(tab) { 
         if(tab.active && tab !== selectedTab) { 
          tab.active = false; 
         } 
        }); 
        selectedTab.active = true; 
       }; 
      } 
     }; 
    }); 

タブセットのHTML対応タブセットディレクティブため。

<div role="tabpanel" class="tabsets"> 
    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" ng-repeat="tab in tabs.tabs" ng-class="{'active': tab.active}"> 
     <a href="#{{tab.heading}}" role="tab" ng-click="tabs.select(tab)">{{tab.heading}}</a> 
    </li> 
    </ul> 
    <div ng-transclude></div> 
</div> 

これは、個々のタブを作成するためのタブディレクティブです。

angular 
     .module('myApp') 
     .directive('Tab', function() { 
      return { 
       restrict: 'E', 
       transclude: true, 
       template: `<div role="tabpanel" ng-show="active"><div ng-transclude></div></div>`, 
       require: '^TabSet', 
       scope: { 
        heading: '@' 
       }, 
       link: function(scope, elem, attr, tabs) { 
        scope.active = false; 
        tabs.addTab(scope); 
       } 
      } 
     }); 

私は私が行方不明です何あまりにもわからないが、与えられた構造のために私は次のクリックだけでなく、main.htmlとで定義された戻るボタンに基づいてタブを切り替えたいです。

あなたのクイックヘルプを事前に評価してください。

Answer 1

あなたのコードがTabディレクティブのリンク機能に間違っています。

link: function(scope, elem, attr, reporttabs) { 
    scope.active = false; 
    tabs.addTab(scope); 
} 

あなたは

をreporttabs.addTabそして、ここであなたが実装したい機能のためのソリューションであるためにtabs.addTabを変更する必要があります。 selectedTabIndexプロパティをTabsetのスコープに追加する必要があります。したがって、scope $ watch関数を使用することができ、selectedTabIndexが変更されたときにscope.select（selectedTab）を呼び出すことができます。ここでのコード例：

angular 
    .module('myApp') 
    .controller('Controller', ['$scope', function($scope,) { 
     var vm = this; vm.selectedTabIndex = 0; 
     $scope.goToNextTab = function() { 
      vm.selectedTabIndex += 1; 
     }; 

     $scope.goToPreviousTab = function() { 
      vm.selectedTabIndex -= 1; 
     }; 
    }]); 
angular 
.module('myApp') 
.directive('TabSet', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: { 'selectedTabIdex': '=' }, 
     templateUrl: 'tabset.html', 
     bindToController: true, 
     controllerAs: 'tabs', 
     controller: function($scope) { 
      var self = this; 
      self.tabs = []; 
      self.addTab = function addTab(tab) { 
       self.tabs.push(tab); 
       if(self.tabs.length === 1) { 
        tab.active = true; 
       } 
      }; 
      self.select = function(selectedTab) { 
       angular.forEach(self.tabs, function(tab) { 
        if(tab.active && tab !== selectedTab) { 
         tab.active = false; 
        } 
       }); 
       selectedTab.active = true; 
      }; 
      $scope.$wacth('selectedTabIndex', function(newValue, oldValue) { 
       var index = newValue; 
       if(index >= self.tabs.length) { 
       return $scope.selectedTabIndex = 0; 
       } 
       if(index < 0) { 
       return $scope.selectedTabIndex = self.tabs.length - 1; 
       } 
       self.select(self.tabs[index]); 
      }); 
     } 
    }; 
});