Angular中data-target能否与router配合使用？导航标签问题咨询

嘿，作为前端新手碰到这个问题太正常啦，我来帮你理清楚怎么实现～

答案是可以配合，但需要调整默认的使用方式，因为ui-bootstrap的nav-tabs默认的data-target是用来切换页面内的tab面板（锚点定位），而ngRoute是用来做路由层面的视图切换（加载不同的template和controller），两者的逻辑不一样，直接用默认的data-target没法关联路由，得做些小改造。

具体实现步骤 #

1. 替换data-target为路由跳转事件
   把tab上的data-target和data-toggle去掉，换成ng-click来触发路由跳转，同时用ng-class让当前路由对应的tab自动高亮激活。

2. 示例代码改造
   假设你的nav-tabs原本是这样的：

   <ul class="nav nav-tabs">
     <li><a data-target="#foo" data-toggle="tab">Foo</a></li>
     <!-- 其他tab -->
   </ul>
   

   改成结合ngRoute的版本：

   <!-- 给tab栏加个控制器来处理路由逻辑 -->
   <ul class="nav nav-tabs" ng-controller="TabRouterCtrl">
     <li ng-class="{active: currentRoute === '/foo'}">
       <a ng-click="navigateTo('/foo')">Foo</a>
     </li>
     <!-- 其他路由对应的tab同理 -->
     <li ng-class="{active: currentRoute === '/bar'}">
       <a ng-click="navigateTo('/bar')">Bar</a>
     </li>
   </ul>
   

   然后在你的AngularJS app里添加对应的控制器：

   app.controller('TabRouterCtrl', function($scope, $location) {
     // 监听路由变化，更新当前路由路径
     $scope.$on('$routeChangeSuccess', function() {
       $scope.currentRoute = $location.path();
     });
   
     // 路由跳转方法
     $scope.navigateTo = function(routePath) {
       $location.path(routePath);
     };
   });
   

3. 如果用ui-bootstrap的uib-tabset指令
   要是你用的是官方的uib-tabset组件，也可以这么改：

   <uib-tabset ng-controller="TabRouterCtrl">
     <uib-tab 
       heading="Foo" 
       active="currentRoute === '/foo'"
       ng-click="navigateTo('/foo')"
     ></uib-tab>
     <uib-tab 
       heading="Bar" 
       active="currentRoute === '/bar'"
       ng-click="navigateTo('/bar')"
     ></uib-tab>
   </uib-tabset>
   

关键说明 #

• 不要同时保留data-target和路由跳转逻辑，不然会同时触发面板切换和路由跳转，导致冲突。
• 这样改造后，点击tab就会触发ngRoute加载对应的template（比如你配置的/foo对应app/partials/foo.html），同时当前路由对应的tab会自动高亮，完美结合两者的功能～

内容的提问来源于stack exchange，提问作者user3019766