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

Question

因为我在 HTML 引导模板中包含了 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组件示例来创建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/

Answer 2

问题在于 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

使用非常简单，就是一个例子和tab的plunker的教程：tabs with angular ui bootstrap

希望对你有所帮助。