Disable the ngRoute option in specific links

Question

I have 2 links that require different pages using ngRoute

<a href="#home">Home</a>
<a href="#profile">Profile</a>

When you click a link to a link, a page with tabs for bootstrapping appears

 <!-- Nav tabs -->
  <ul class="nav nav-tabs profiletab" role="tablist">
    <li role="presentation" class="active"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation"><a href="#tab2" aria-controls="profile" role="tab" data-toggle="tab">Tab2</a></li>
    <li role="presentation"><a href="#tab3" aria-controls="images" role="tab" data-toggle="tab">Tab3</a></li>    
  </ul>

 <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="tab1">
        Tab 1 data    
    </div>
    <div role="tabpanel" class="tab-pane" id="tab2">
        Tab2 data

    </div>   
    <div role="tabpanel" class="tab-pane" id="tab3">
        Tab 3 data

    </div>
</div>

If I click on the tabs, it shows a blank page instead of opening the corresponding tabs. How to disable the ngRoute option on the boot tabs? My angular configuration is shown below

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

 // configure our routes
app.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/home', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
        .when('/profile', {
            templateUrl : 'pages/profile.html',
            controller  : 'ProfileController'
        })
        .otherwise('/');

});

Answer 1

I think you should look for an approach in a different way, this is more, how can you disable the link in a tab?

this can be done by assigning the target an empty element, all target = blank will be ignored by the angular router:

<ul class="nav nav-tabs profiletab" role="tablist">
    <li role="presentation" class="active"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation"><a href="#tab2" aria-controls="profile" role="tab" data-toggle="tab" target="_blank">Tab2</a></li>
    <li role="presentation"><a href="#tab3" aria-controls="images" role="tab" data-toggle="tab" target="_blank">Tab3</a></li>    
  </ul>

ng-disabled ,

<ul class="nav nav-tabs profiletab" role="tablist">
    <li role="presentation" class="active"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation"><a   ng-disabled="someroute === 'home'" href="#tab2" aria-controls="profile" role="tab" data-toggle="tab">Tab2</a></li>
    <li role="presentation"><a href="#tab3" ng-disabled="someroute === 'profile'" aria-controls="images" role="tab" data-toggle="tab">Tab3</a></li>    
</ul>

:

app.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/home', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController',
            resolve:{
                someroute:function(){
                    return 'home';
                }
            }
        })
        .when('/profile', {
            templateUrl : 'pages/profile.html',
            controller  : 'ProfileController',
            resolve:{
                someroute:function(){
                    return 'profile';
                }
            }
        })
        .otherwise('/');
});

app.controller("myController", function (someroute) {
    $scope.someroute = someroute;
});

. ,

app.controller("myController", function ($location) {
    $scope.someroute = $location.path(); // '/Home'
});

Answer 2

href="#tab1" data-target="#tab1".