显示下一个选项卡 bootstrap angular js

Question

我有一个问题，如果我单击报告选项卡或其他选项卡。它将返回登录页面。我希望如果我单击另一个选项卡，它不会返回到登录页面。有什么解决办法吗？这是我的笨蛋

https://plnkr.co/edit/snDNgPEToZsIbXaHSWib?p=preview

这是我的js文件，谢谢，抱歉英语不好

var app = angular.module('coba', ['ngRoute']);

app.filter('coba', function() {
    return function(input, begin) {
        if (input) {
            begin = +begin;
            return input.slice(begin);
        }
        return [];
    }
});
app.filter('report', function() {
    return function(input, begin) {
        if (input) {
            begin = +begin;
            return input.slice(begin);
        }
        return [];
    }
});

app.config(['$routeProvider',
  function($routeProvider) { 
        $routeProvider.when('/', {
          templateUrl: 'login.html',
          controller: 'logincont'
        })
        .when('/main', {
          templateUrl: 'mainmenu2.html'
        })
        .otherwise({redirectTo: '/'});
}]);

app.run(function($rootScope,$route,$location){
       var unauthRoutes= [];
       console.log(unauthRoutes);
    angular.forEach($route.routes, function(route, path) {
        // push route onto unauthRoutes if it has a truthy allowUnauth value
        route.allowUnauth && (unauthRoutes.push(path));
    });

    $rootScope.$on('$routeChangeStart', function(event, nextLoc, currentLoc) 
    {
        var atuhRoute= (-1 === unauthRoutes.indexOf($location.path()));

        if(atuhRoute && !$rootScope.loggedIn) {
            $location.path('/');
        }
    });
})

app.controller("logincont", ['$scope','$http','$window','$location','$rootScope',function($scope,$http,$window,$location,$rootScope){
$scope.login = function () {
      if ($scope.userid == 'rock' && $scope.pass == 'rock')
        {
          alert('Login Incorrect'); 
        }
        else
        {
          $rootScope.loggedIn = true;
          $location.path('/main');
          console.log('success');
        }
      };  

      }]);

app.controller("moncont", ['$scope','$http','$filter','$window','$location',function($scope,$http,$filter,$window,$location){
  $scope.logout = function(){
    $location.path('/logout');
  }
      }]);

app.controller("repcont", ['$scope','$http',function($scope,$http){
  $scope.logout = function(){
    $location.path('/logout');
      };

      }]);

Answer 1

您的链接指向不存在的页面，因此它们正在调用 $routeProvider.otherwise({redirectTo: '/'});，由于 when('/', { templateUrl: 'login.html', ...

，这会将您重定向回登录屏幕

您的链接还需要适当的散列：

<li><a data-toggle="tab" href="#!/home">Log Out</a></li>

已从 #home 更新为 #!/home

现在他们可以指向正确的页面，只要这些页面存在，所以您需要修改您的配置：

app.config(['$routeProvider',
  function($routeProvider) { 
     $routeProvider.when('/', {
        templateUrl: 'login.html',
        controller: 'logincont'
     })
     .when('/main', {
        templateUrl: 'mainmenu2.html'
      })
     .when('/menu1', {
        templateUrl: 'menu1.html'
      })
     .when('/home', {
        templateUrl: 'home.html'
      })
     .when('/report', {
        templateUrl: 'report.html'
      })
      .otherwise({redirectTo: '/'});
}]);

Answer 2

首先，在你的代码中，在路由文件中，你没有在你的 pluker 中提到的所有路由

只有一条路线 main

.when('/main', {
          templateUrl: 'mainmenu2.html'
  })

将 #main 更改为 #!main 以使其正常工作。

<ul class="nav nav-tabs navbar-ke-kanan" >
    <li><a data-toggle="tab" href="#!login">Log Out</a></li>
    <li><a data-toggle="tab" href="#!main">Menu 2</a></li>
    <li><a data-toggle="tab" href="#!main">Report</a></li>
    <li class="active"><a data-toggle="tab" href="#!main">Monitoring</a></li>
  </ul>

Here is AN UPDATED PLUNKER

Answer 3

这是工作代码 - https://plnkr.co/edit/lYvMFO96IxpwfizjrUjy?p=preview

您应该在脚本中添加代码来处理应用程序中每条路由的路由。例如，如果您想访问 /report，您应该具有以下内容 -

.when('/main', {
  templateUrl: 'mainmenu2.html'
})

同样，将您的链接从 href="#report" 更新为 href="#!report"

希望这对您有所帮助。

显示下一个选项卡 bootstrap angular js

showing next tab bootstrap angular js

javascript

angularjs

angular-router