javascript - 在我的模板中包含 Angular 后，选项卡无法正常工作

Question

我在使用选项卡时遇到问题，因为我在我的 HTML Bootstrap 模板中包含了 AngularJS。我正在使用 Flatastic template .现在我不知道如何进一步进行。

让我给你看我的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 时要注意或做什么以及如何面对这些问题，则可获得奖励积分

Answer 1

您可以使用这个 angularJS 组件示例来创建选项卡

Angular 文件(.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/