AngularJS and Bootstrap tab behavior not working

Question

So here is my code for my view:

<ul class="nav nav-pills" id="my-pill">
                <li class="active"><a href="#tab0" data-toggle="tab">Tools
                        Home</a></li>
                <li><a href="#tab1" data-toggle="tab">Fair Trade Judge</a></li>
                <li><a href="#tab2" data-toggle="tab">Awards</a></li>
                <li><a href="#tab3" data-toggle="tab">Draft Buddy</a></li>
                <li><a href="#tab4" data-toggle="tab">Add A League</a></li>
                <li><a href="#tab5" data-toggle="tab">Insult Generator</a></li>
                <li><a href="#tab6" data-toggle="tab">League Poll</a></li>
                <li><a href="#tab7" data-toggle="tab">Smart Rankings</a></li>
                <li><a href="#tab8" data-toggle="tab">Composite Rankings</a></li>
                <li><a href="#tab9" data-toggle="tab">Waiver Wire Pickup
                        Aid</a></li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab0">
                    <div class="row">
                        <div class="col-md-12">
                            <h2>Tool Descriptions</h2>
                            <h3>Fair Trade Judge</h3>
                            <p>This tool will help you decide whether or not a proposed
                                trade is fair</p>
                            <h3>Awards</h3>
                            <p>Weekly awards given out to teams who have the best, and
                                worst weeks in the league</p>
                            <h3>Draft Buddy</h3>
                            <p>Use this tool to aid you during your big draft day</p>
                            <h3>Add A League</h3>
                            <p>This isn't really a tool, and doesn't fit on the
                                dashboard</p>
                            <h3>Insult Generator</h3>
                            <p>Let our team analysis algorithm pick apart any team in
                                your league with relevant insults</p>
                            <h3>League Poll</h3>
                            <p>Rank every team in your league on a weekly basis. Overall
                                rankings will be calculated based on the poll</p>
                            <h3>Smart Rankings</h3>
                            <p>This tool ranks every team in your league based on
                                complex rankings algorithm, that factors in more than just your
                                W-L-T record</p>
                            <h3>Composite Rankings</h3>
                            <p>Ever wonder what your record would be if you played every
                                team every week instead of the head to head match-up style?
                                This tool will tell you what your overall record would be</p>
                            <h3>Waiver Wire Pickup Aid</h3>
                            <p>See who our analysis of your team determines you should
                                pick up off of the waiver wire this week</p>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab1" >
                    <h2>Select the teams that are going to do a trade, then
                        select the players</h2>
                    <div ng-controller="FTJController" class="teamWrapper">
                        <div class="col-md-6 team" style="float: left;">
                            {{list1}} <select ng-model="selectedTeam1"
                                ng-options="item as item.teamName for item in teams track by item.teamID"
                                ng-change="getRoster1(selectedTeam1)">
                                <option value="">Team 1</option>
                            </select>
                            <table class="table-striped" style="width: 100%">
                                <tr>
                                    <td></td>
                                    <td>Name</td>
                                    <td>Position</td>
                                    <td>NFLTeamName</td>
                                    <td>InjuryCode</td>
                                </tr>
                                <tr ng-repeat="player1 in roster1">
                                    <td><input type="radio" ng-value="{{player1.PlayerID}}"
                                        ng-model="selected1" ng-change="addID1(selected1)"
                                        name="selected1" /></td>
                                    <td>{{player1.Name}}</td>
                                    <td>{{player1.Position}}</td>
                                    <td>{{player1.NFLTeamName}}</td>
                                    <td>{{player1.InjuryCode}}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-offset-6 team">
                            {{list2}} <select ng-model="selectedTeam2"
                                ng-options="item as item.teamName for item in teams track by item.teamID"
                                ng-change="getRoster2(selectedTeam2)">
                                <option value="">Team 2</option>
                            </select>
                            <table class="table-striped" style="width: 100%">
                                <tr>
                                    <td></td>
                                    <td>Name</td>
                                    <td>Position</td>
                                    <td>NFLTeamName</td>
                                    <td>InjuryCode</td>
                                </tr>
                                <tr ng-repeat="player2 in roster2">
                                    <td><input type="radio" ng-value="{{player2.PlayerID}}"
                                        ng-model="selected2" ng-change="addID2(selected2)"
                                        name="selected2" /></td>
                                    <td>{{player2.Name}}</td>
                                    <td>{{player2.Position}}</td>
                                    <td>{{player2.NFLTeamName}}</td>
                                    <td>{{player2.InjuryCode}}</td>
                                </tr>
                            </table>
                        </div>
                        <br />
                        <div class="button">
                            <input type="button" value="compare players"
                                ng-click="comparePlayers()" />
                            <div>Is this trade fair? {{FTJ}}</div>
                        </div>
                    </div>
                </div>

Whenever I try to click on one of the tabs, instead of loading the data, it will redirect me to my login page. I don't want any redirection, since all the data I need loaded after login. If I change the class of tab1 to active, I get the data behavior I want, so I think it's an issue with Bootstrap. Any ideas?

EDIT: Here is my controller file (the calls to API are working fine)

HomeController.$inject = ['UserService', '$rootScope'];
function HomeController(UserService, $rootScope) {
var vm = this;

vm.user = null;
vm.allUsers = [];
vm.deleteUser = deleteUser;

initController();

function initController() {
    loadCurrentUser();

}

function loadCurrentUser() {
    UserService.GetByEmail($rootScope.globals.currentUser.email)
        .then(function (user) {
            vm.user = user.data;
        });
}

function deleteUser(id) {
    UserService.Delete(id)
    .then(function () {
        loadAllUsers();
    });
}
}

FTJController.$inject = ['$scope', '$http'];
function FTJController($scope, $http) {
$scope.list1 = 'Select Team 1';
$scope.list2 = 'Select Team 2';
//$scope.selectedTeam = null;
$scope.teams = [];
$scope.players1 = [];
$scope.players2 = [];
$scope.roster1 = null;
$scope.roster2 = null;
$http({
    method: 'GET',
    url: './rest/LeagueTeams?LeagueID=1682132'
}).success(function (result) {
    $scope.teams = result;
});
console.log("in controller");
$scope.getRoster1 = function(selectedTeam){
    console.log("in getRoster with teamID = " + selectedTeam.teamID);
    $http({
        method: 'GET',
        url: './rest/Roster?LeagueID=1682132&TeamID=' +selectedTeam.teamID + '&Week=1&Year=2015'
    }).then(function (result){
        $scope.roster1 = result.data;
    });

}
//duplicating for now, should change to use the same method for both rosters
$scope.getRoster2 = function(selectedTeam){
    console.log("in getRoster with teamID = " + selectedTeam.teamID);
    $http({
        method: 'GET',
        url: './rest/Roster?LeagueID=1682132&TeamID=' +selectedTeam.teamID + '&Week=1&Year=2015'
    }).then(function (result){
        $scope.roster2 = result.data;
    });
}

$scope.comparePlayers = function(){
    console.log("testingsss");
    console.log($scope.players1);
    console.log($scope.players2);
    console.log('call: ./rest/FTJ?PlayerID1=' + $scope.players1 + '&PlayerID2=' + $scope.players1);
    console.log('Is $scope.players1 ' + ($scope.players1) + ' > $scope.players2 ' + $scope.players1 + ' ?');
    console.log('comparison');
    console.log($scope.players1 > $scope.players2);
    $http({
        method: 'GET',
        url: './rest/FTJ?PlayerID1=' + $scope.players1 + '&PlayerID2=' + $scope.players2
    }).then(function (result){
        console.log('result.data');
        console.log(result.data);
        if (result.data){
            $scope.FTJ = "Hell yea";
        } else {
            $scope.FTJ = "f no";
        }
    });
};
$scope.addID1 = function(s){
    $scope.players1 = s;
    console.log($scope.players1);

};
$scope.addID2 = function(s){
    $scope.players2 = s;
    console.log($scope.players2);
};
}

And here is my app.js file with the routing:

(function () {
'use strict';

angular
    .module('app', ['ngRoute', 'ngCookies'])
    .config(config)
    .run(run);

config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            controller: 'HomeController',
            templateUrl: 'home/home.view.html/',
            controllerAs: 'vm'
        })

        .when('/login', {
            controller: 'LoginController',
            templateUrl: 'login/login.view.html',
            controllerAs: 'vm'
        })

        .when('/register', {
            controller: 'RegisterController',
            templateUrl: 'register/register.view.html',
            controllerAs: 'vm'
        })

        .otherwise({ redirectTo: '/login' });
}

run.$inject = ['$rootScope', '$location', '$cookieStore', '$http'];
function run($rootScope, $location, $cookieStore, $http) {
    // keep user logged in after page refresh
    $rootScope.globals = $cookieStore.get('globals') || {};
    if ($rootScope.globals.currentUser) {
        $http.defaults.headers.common['Authorization'] = 'Basic ' +     $rootScope.globals.currentUser.authdata; // jshint ignore:line
    }

    $rootScope.$on('$locationChangeStart', function (event, next, current) {
        // redirect to login page if not logged in and trying to access a restricted page
        var restrictedPage = $.inArray($location.path(), ['/login', '/register']) === -1;
        var loggedIn = $rootScope.globals.currentUser;
        if (restrictedPage && !loggedIn) {
            $location.path('/login');
        }
    });
}
})();

How do I fix the routing so that when I click on tab1, it will just show the data and move to that tab instead of redirecting to login? Thanks!

Vimal Raj · Accepted Answer · 2019-02-20 15:30:58Z

14

It happens because of angular routing... You can just add to every anchor tag the following attribute target="_self"

For example: <li><a href="#tab1" data-toggle="tab" target="_self">Fair Trade Judge</a></li>

Hope it resolves it.

edited Feb 20, 2019 at 15:30

answered Dec 9, 2016 at 14:31

Vimal Raj

1561 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kapil Soni Over a year ago

i have used above but everytime page reload i dont need this i have change only tabs

sebu · Accepted Answer · 2019-01-23 22:11:01Z

1

You can use data-target="#tab1" instead of href="#tab1"

answered Jan 23, 2019 at 22:11

sebu

2,9641 gold badge33 silver badges47 bronze badges

Comments

Low Flying Pelican · Accepted Answer · 2016-04-10 23:22:33Z

0

Angular router is routing to #tab1 when you click on the link. Since there is no such route defined and login screen is the default route, it must be displaying the login screen.

you could use angular-ui to get bootstrap work easily with angular.

answered Apr 10, 2016 at 23:22

Low Flying Pelican

6,0621 gold badge36 silver badges44 bronze badges

2 Comments

alcol92 Over a year ago

Hey, could you take a look at the code now? I added the js files, can you help me setup the routes correctly, I am still not sure.

Low Flying Pelican Over a year ago

it's nothing wrong with routes, but the issue is when you click on tabs, angular thinks it's routing to #tab1 (example) route. Since there is no such route it ends up going to default route which is login. So use angular-ui since it's the angular way of using bootstrap scripts.

marc_s · Accepted Answer · 2017-04-14 07:47:05Z

Your default page because there is no defined route to be found.

So, what you can do is you can handle tab click event and prevent this default behaviour using

e.preventDefault();

you have two options:

add ng-click="show($event)" for each tab

For example, in controller
```
$scope.show = function (e) {
    e.preventDefault();
    jQuery('.nav-pills[href="e.targrt.hash"]').tab('show')
};
```
Check Bootstrap document for more detail: http://getbootstrap.com/javascript/#tabs

or add directive to handle event.

<a show-tab href="#tab0" data-toggle="tab">Tools Home</a>

app.directive('showTab', function () {

// here first prevent deault behaviour of a tab,  then add new click event which invokes jQuery related stuff for tabs
return function (scope, iElement, iAttributes) {        
    iElement.click(function (e) {
        e.preventDefault();
        $(iElement).tab('show');
    });
};

This is the better option.

Please check this link how to do it: https://www.grobmeier.de/bootstrap-tabs-with-angular-js-25112012.html

Dmitry · Accepted Answer · 2018-01-16 12:50:57Z

0

Try this adding to your angjularjs

    $(".yourTabClassName anchorTag").click(function(anyName) {
        anyName.preventDefault();
    });

Ex:

    $(".nav a").click(function(e) {
        e.preventDefault();
    });

edited Jan 16, 2018 at 12:50

Dmitry

7,29614 gold badges42 silver badges42 bronze badges

answered Jan 16, 2018 at 12:33

Deepak Revanaki

114 bronze badges

Comments

Mahi Tej Gvp · Accepted Answer · 2018-03-08 10:56:14Z

0

buddy, I think you are missing role='tab' attribute which does not invoke the angular router

answered Mar 8, 2018 at 10:56

Mahi Tej Gvp

1,0341 gold badge17 silver badges35 bronze badges

Comments

Dumber_Texan2 · Accepted Answer · 2019-07-16 20:17:25Z

I got it working by doing this. You'll notice that i'm using <app-tab-profile></app-tab-profile> in the Profile tab-pane. I'm not sure if this is best practice, but it seems to work. Routing is NOT setup for the TabProfileComponent.

<div class="section-container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><app-tab-profile></app-tab-profile></div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
  </div>

Hope this helps!

popovich · Accepted Answer · 2017-10-13 10:06:42Z

-1

setTimeout(function() {
    $('ul.tabs').tabs();
}, 100);

answered Oct 13, 2017 at 10:06

popovich

1

1 Comment

Massimiliano Kraus Over a year ago

Usually it's better to explain a solution instead of just posting some rows of anonymous code. You can read How do I write a good answer, and also Explaining entirely code-based answers.

Collectives™ on Stack Overflow

AngularJS and Bootstrap tab behavior not working

8 Answers 8

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related