AngularJS和Bootstrap选项卡行为无法正常工作

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJS和Bootstrap选项卡行为无法正常工作相关的知识,希望对你有一定的参考价值。

所以这是我的观点代码:

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

每当我尝试单击其中一个选项卡而不是加载数据时,它会将我重定向到我的登录页面。我不想要任何重定向,因为我需要在登录后加载所有数据。如果我将tab1的类更改为活动,我会得到我想要的数据行为,所以我认为这是Bootstrap的一个问题。有任何想法吗?

编辑:这是我的控制器文件(对API的调用工作正常)

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);
};
}

这是我的app.js文件与路由:

(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');
        }
    });
}
})();

如何修复路由,以便当我单击tab1时,它只显示数据并移动到该选项卡而不是重定向到登录?谢谢!

答案

这是因为角度路由...你可以添加到每个锚标签,以下属性target =“_ self”

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

希望它能解决它。

另一答案

单击链接时,Angular路由器将路由到#tab1。由于没有定义此类路由且登录屏幕是默认路由,因此必须显示登录屏幕。

你可以使用angular-ui轻松获得自举工作。

另一答案

您的默认页面,因为没有找到已定义的路由。

因此,您可以做的是您可以处理选项卡单击事件并使用阻止此默认行为

e.preventDefault();

你有两个选择:

  1. 为每个标签添加ng-click="show($event)" 例如,在控制器中 $scope.show = function (e) { e.preventDefault(); jQuery('.nav-pills[href="e.targrt.hash"]').tab('show') }; 检查Bootstrap文档以获取更多详细信息:http://getbootstrap.com/javascript/#tabs
  2. 或添加指令来处理事件。 <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'); }); }; 这是更好的选择。

请检查此链接如何操作:https://www.grobmeier.de/bootstrap-tabs-with-angular-js-25112012.html

另一答案

试试这个添加到你的angularjs

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

例如:

    $(".nav a").click(function(e) {
        e.preventDefault();
    });
另一答案

哥们,我认为你缺少角色='tab'属性,它不会调用角度路由器

另一答案

您可以使用data-target="#tab1"而不是href="#tab1"

另一答案

我通过这样做得到了它。您会注意到我在“配置文件”选项卡窗格中使用了<app-tab-profile></app-tab-profile>。我不确定这是否是最佳做法,但似乎有效。没有为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>

enter image description here

希望这可以帮助!

另一答案
setTimeout(function() {
    $('ul.tabs').tabs();
}, 100);

以上是关于AngularJS和Bootstrap选项卡行为无法正常工作的主要内容,如果未能解决你的问题,请参考以下文章

使用 AngularJS 在 Bootstrap 选项卡中重新加载数据

angularjs 中的选项卡无法与 UI-Router 和 UI-bootstrap 一起正常工作

angularjs 中的路由 与 bootstrap标签选项卡的冲突 解决方案

AngularJS ngModel 在 ui-bootstrap 选项卡集中不起作用

使用 AngularJS 的引导指令在选项卡中添加图像

带有数据切换的引导选项卡导致 angularjs 重新加载