Question

由于我在我的HTML引导模板中包含了AngularJS，因此我对标签有问题。我正在与Flatastic template合作。现在我不知道如何继续前进。

让我告诉你我的HTML代码

Artisan::call("crud:generate", [
        "name" => ucwords(str_singular($request->input('table'))),
        "--fields" => $fields
]);

正如您所看到的标签可以使用标签<div>  <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>  <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>进行点击，但问题是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

使用起来非常简单，这是一个关于示例的教程以及带有它的标签的附件：tabs with angular ui bootstrap

希望它会对你有所帮助。

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

2 个答案: