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 我需要为Next和Back Button定义函数

(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中定义的Next和Back Button切换标签。

提前感谢您的快速帮助。

Answer 1

我看到你的代码在Tab指令的链接功能上是错误的。

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

您需要将tabs.addTab更改为reporttabs.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]);
            });
        }
    };
});

为制表符创建了自定义指令。单击下一步按钮需要转到下一个选项卡，单击后退按钮需要进入上一个选项卡

1 个答案: