在我的模板中包含角度后，选项卡无法正常工作

Tabs are not working properly after including angular in my template

本文关键字：常工作 工作 选项 我的 包含角      更新时间：2023-09-26

我在标签上遇到了问题，因为我在我的HTML引导模板中包含AngularJS。我正在使用平板模板。现在我不知道如何继续。

让我向您展示我的 html 代码

<div>
    <!--tabs navigation-->
    <nav>
        <ul role="tablist">
            <li role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true">
               <a href="#tab-1" role="presentation" tabindex="-1" id="ui-id-1">Tab 1</a>
            </li>
            <li role="tab" tabindex="-1" aria-controls="tab-2" aria-labelledby="ui-id-2" aria-selected="false">
                <a href="#tab-2" role="presentation" tabindex="-1" id="ui-id-2">Tab 2</a>
            </li>
            <li role="tab" tabindex="-1" aria-controls="tab-3"  aria-labelledby="ui-id-3" aria-selected="false">
                <a href="#tab-3" role="presentation" tabindex="-1" id="ui-id-3">Tab 3</a>
            </li>
        </ul>
    </nav>
    <!--tabs content-->
    <section class="tabs_content shadow r_corners">
        <div id="tab-1" aria-labelledby="ui-id-1" role="tabpanel" aria-expanded="true" aria-hidden="false">
            <p>BLABLABLA</p>
        </div>
        <div id="tab-2" aria-labelledby="ui-id-2" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
            <p>BLABLABLA </p>
        </div>
        <div id="tab-3" aria-labelledby="ui-id-3" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;">
            <p>BLABLABLA</p>
        </div>
    </section>
</div>

如您所见，选项卡可以使用标签<a href="#tab3" ...单击，但问题是 AngularJs 接管链接并将您重定向到其他页面。我相信这些选项卡是用 Jquery 编写的，现在我想知道我需要做什么才能让它按预期工作。如果您需要任何其他信息，请告诉我，我会提供。

+对于找到任何文章、教程或任何类型的信息的用户的奖励点，当您在 Bootstrap 模板上包含 Angular 以及如何面对这些问题时要注意或做什么

您可以使用

此angularJS组件示例来创建tabs

角度文件 （.js）

angular.module('components', [])
  .directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];
        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }
        this.addPane = function(pane) {
          if (panes.length == 0) $scope.select(pane);
          panes.push(pane);
        }
      },
      template:
        '<div class="tabbable">' +
          '<ul class="nav nav-tabs">' +
            '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
              '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
            '</li>' +
          '</ul>' +
          '<div class="tab-content" ng-transclude></div>' +
        '</div>',
      replace: true
    };
  })
  .directive('pane', function() {
    return {
      require: '^tabs',
      restrict: 'E',
      transclude: true,
      scope: { title: '@' },
      link: function(scope, element, attrs, tabsController) {
        tabsController.addPane(scope);
      },
      template:
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
      replace: true
    };
  })

这个链接可以提供更多的想法。查看本页中的最后一个示例 https://angularjs.org/

问题是 AngularJs 将其作为路由：href="#tab-1"。

 <li role="tab" tabindex="0" aria-controls="tab-1" aria-labelledby="ui-id-1" aria-selected="true">
           <a href="#tab-1" role="presentation" tabindex="-1" id="ui-id-1">Tab 1</a>
 </li>

你可以试试这个，我认为这是在同一项目中使用 Bootstrap 和 AngularJs 的最佳解决方案，没有任何冲突：Angular Ui Bootstrap

它使用起来非常简单，这是一个关于示例和选项卡的教程：带有角度 UI 引导的选项卡

希望对您有所帮助。

相关文章：