为选项卡创建了自定义指令.单击“下一步”按钮需要转到下一个选项卡，然后单击“背”按钮需要到上一个选项卡

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 我需要定义下一个和后背按钮的功能

(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() {
            
            };
        }]);
})();

我的 TABSET指令显示3个选项卡。

    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;
                };
            }
        };
    });

TABSET HTML 对于相应的 TABSET指令。

 <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 Directive的链接函数上是错误的。

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

您需要将tabs.addtab更改为reporttabs.addtab

这是您要实现的功能的解决方案。您需要将SelectedTabIndex属性添加到TabSet的范围中。因此，您可以使用范围。$ 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]);
            });
        }
    };
});