CODEWITHSUNDEEP
javascriptjqueryhtmlangularjstwitter-bootstrap
Valor_
Valor_

Reputation: 3601

Tabs are not working properly after including angular in my template

i'm having problem with tabs since i have included AngularJS in my HTML bootstrap template. I'm working with Flatastic template. Now i don't know how to proceed further.

Let me show you my html code

<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>

As you can see tabs are clickable with a tag <a href="#tab3" ... but the problem is that AngularJs takes over link and redirects you to some other page. I believe that those tabs are written in Jquery and now i'm wondering what i need to do to make it working as intended. If you need any additional information, please let me know and i will provide.

+ Bonus point for user who finds any articles, tutorials or any kind of informations regarding what to watch out or do when you include Angular on Bootstrap templates and how to face those problems

Upvotes: 1

Views: 1869

Answers (2)

Orl&#233;ando Dassi
Orl&#233;ando Dassi

Reputation: 466

The problem is that AngularJs take this as a routing : 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>

You can try this, I think it is the best solution to work with Bootstrap and AngularJs in a same project without any conflicts : Angular Ui Bootstrap

It is very simple to use, that is a tutorial about an example and the plunker of tab with it : tabs with angular ui bootstrap

Hope it will help you.

Upvotes: 1

Vald&#232;se Kamdem
Vald&#232;se Kamdem

Reputation: 150

You can use this angularJS component example to create tabs

angular file (.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
    };
  })

this link can give more ideas. Look at the last example in this page https://angularjs.org/

Upvotes: 1

Related Questions