Reputation: 165

AngularJS and Bootstrap tab behavior not working

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!

Upvotes: 2

Answers (8)

Dumber_Texan2

Reputation: 978

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!

Upvotes: 0

Vimal Raj

Reputation: 156

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.

Upvotes: 14

sebu

Reputation: 2954

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

Upvotes: 1

Mahi Tej Gvp

Reputation: 1034

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

Upvotes: 0

Deepak Revanaki

Reputation: 11

Try this adding to your angjularjs

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

Ex:

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

Upvotes: 0

popovich

Reputation: 1

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

Upvotes: -1

Nalin

Reputation: 111

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

Upvotes: 0

Low Flying Pelican

Reputation: 6054

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.

Upvotes: 0

AngularJS and Bootstrap tab behavior not working

Answers (8)

Related Questions