在特定链接中禁用 ngRoute 选项

Question

我有 2 个 link 需要使用 ngRoute 的不同页面

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

单击配置文件 link 时，会出现一个页面，其中包含 bootstrap 个选项卡

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

如果我点击选项卡显示空白页面而不是打开相应的选项卡如何在 bootstrap 选项卡中禁用 ngRoute 选项？我的 angular 配置如下所示

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

我认为你应该换个角度看这个方法，更多的是如何禁用选项卡中的 link？

可以通过分配目标空白元素来完成，angular 路由器将忽略所有目标=空白：

<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"。为我工作

在特定链接中禁用 ngRoute 选项

disable ngRoute option in specific links

twitter-bootstrap

angularjs