Question

我有2个链接，使用ngRoute需要不同的页面

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

单击配置文件链接时，会出现一个包含引导选项卡的页面

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

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

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

我认为你应该以另一种方式看待这种方法，还有更多如何禁用标签中的链接？

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

<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并创建评估路径名称的表达式

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

在路由器的resolve方法中设置路由名称，如下所示：

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

2 个答案: