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

MyMain.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>

我的选项卡集指令，显示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);
                }
            }
        });

angular
.module（'myApp'）
.directive（'Tab'，function（）{
返回{
限制：'E'，
是的，
模板：``，
要求：“^TabSet”，
范围：{
标题：“@”
},
链接：功能（范围、要素、属性、选项卡）{
scope.active=false；
tabs.addTab（范围）；
}
}
});

---

我不太确定我遗漏了什么，但对于给定的结构，我希望根据单击main.html中定义的“下一步”和“上一步”按钮来切换选项卡。

我发现您的代码在Tab指令的链接功能上出错

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

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

下面是您想要实现的功能的解决方案。您需要将selectedTabIndex属性添加到选项卡集的范围中。因此，您可以使用scope.watch函数，当SelectedTabinex发生更改时，您可以调用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]);
            });
        }
    };
});

angular
.module（'myApp'）
.controller（'controller'，['$scope'，函数（$scope，）{
var vm=this；vm.selectedTabIndex=0；
$scope.goToNextTab=函数（）{
vm.selectedTabIndex+=1；
};
$scope.goToPreviousTab=函数（）{
vm.selectedTabIndex-=1；
};
}]);
有棱角的
.module（'myApp'）
.directive（'TabSet'，function（）{
返回{
限制：'E'，
是的，
作用域：{'selectedTabIdex'：'='}，
templateUrl:'tabset.html'，
bindToController：对，
controllerAs:“制表符”，
控制器：功能（$scope）{
var self=这个；
self.tabs=[]；
self.addTab=函数addTab（tab）{
self.tabs.push（tab）；
如果（self.tabs.length==1）{
tab.active=true；
}
};
self.select=功能（selectedTab）{
angular.forEach（self.tabs、function（tab）{
如果（tab.active&&tab！==selectedTab）{
tab.active=false；
}
});
selectedTab.active=true；
};
$scope.$wacth（'selectedTabIndex'，函数（newValue，oldValue）{
var指数=新值；
如果（索引>=self.tabs.length）{
返回$scope.selectedTabIndex=0；
}
如果（指数<0）{
返回$scope.selectedTabIndex=self.tabs.length-1；
}
self.select（self.tabs[index]）；
});
}
};
});

你能创建一个JSFIDLE吗？@NaguibIhab我没有小提琴，只是想给你我在生产环境中运行的代码的框架。您可以尝试在您的终端创建吗？@NaguibIhab您可以参考此链接进行本地设置。但是请记住在Main.html中添加这两个按钮。很抱歉。我已经为你提到的第一点编辑了这个问题。我得到了一个控制台错误。“无法设置未定义的属性‘active’”，在“selectedTab.active=true”行上；以及在“self.select（self.tabs[index]）；”行上。

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